CODEWITHSUNDEEP
reactjstypescript
christian lance
christian lance

Reputation: 75

How would I change the component props onClick with a functional component?

I am trying to change the value of the prop onClick. Basically the model is set up to show only one input bar if the enum is set to one and vise versa for two. How would I switch the value of the prop with an onClick function? Below is what I have tried to this point. Right now I am getting the following error: "Argument of type 'boolean' is not assignable to parameter of type 'SetStateAction<Enum_Search_Inputs | null | undefined>'"

 const [pickInput, setPickInput] = useState(search.inputs)

       <Breadcrumb
      borderBottom={'1px'}
      borderColor={'white'}
      color={'white'}
      separator=""
      
    >
      <BreadcrumbItem>
        <Button color={'white'} variant='link' onClick={() => setPickInput(pickInput === 'two')}>Search by location</Button>
      </BreadcrumbItem>
      <BreadcrumbItem>
      <Button color={'white'} variant='link' onClick={() => setPickInput(pickInput === 'one')} >Search by keyword</Button>
      </BreadcrumbItem>
    </Breadcrumb>

Upvotes: 0

Views: 1444

Answers (3)

christian lance
christian lance

Reputation: 75

I was able to solve this by setting up a function that used state to set the value on click.

      function searchLocationHandler() {
    setPickInput('two')
    search.inputs = 'two'
  }
  function searchKeywordHandler() {
    setPickInput('one')
    search.inputs = 'one'
  }

Upvotes: 0

Slothyboi
Slothyboi

Reputation: 44

It looks like you're trying to set the state as a boolean instead of as a one or a two. Your function should look like the one below if you're trying to set the state to be the word "one" or "two", though I'd definitely recommend using an integer for that.

() => setPickInput("one")}

() => setPickInput("two")}

Right now, you're actually doing a comparison inside the function where you set your state (pickInput === 'one') which is going to return a boolean to your setPickInput function based on whether your variable pickInput's value is 'one' instead of actually setting a value inside it.

React Docs link to hooks and state

JS Comparisons documentation

Upvotes: 0

Viet
Viet

Reputation: 12807

You should add boolean type when you declare pickInput

 const [pickInput, setPickInput] = useState<Enum_Search_Inputs | null | undefined | boolean>(search.inputs)

Upvotes: 1

Related Questions