2

I have a variable id that has already had value, I just want that if the user click the ClearIcon the id will turn to null. so that he does not become equal to location.id

  const [getId, setId] = useState(id)
  
  const stopSearching = () => {
    setId(null)
  };
  <IconButton onClick={stopSearching} edge="end">
    <ClearIcon />
  </IconButton>
  {console.log(getId)}
  {filteredLocations.map((location, index) => (
     <LocationWidgetItem
        key={index}
        location={location}
        onClickLocation={setActiveLocation}
          selectedLocation={location.id ==getId}
     />
  ))}
Improve this question
11
  • You need update id in state, then it will appear properly. Commented Jan 3, 2022 at 8:39
  • onClick is being handled by stopSearch but the handler/function you defined is stopSearching, is it just a typo in question? if not make sure that both have the same name. Also set id to null in the stopSearch function. Commented Jan 3, 2022 at 9:55
  • @K450 yes it is a typo, sorry Commented Jan 3, 2022 at 10:04
  • 1
    const [getId, setId] = useState(id) here is the issue i think, the id inside useState(id) must be the initial value of the id state. Do this instead: const [getId, setId] = useState(null) Commented Jan 3, 2022 at 10:29
  • 1
    it can remain the same as it was (location.id ==getId) It was probably getting undefined because in your useState as I meantioned above you set the initial value to id which is probaly a variable that you haven't decalred Commented Jan 3, 2022 at 10:33

2 Answers 2

Reset to default
2

Is id a state variable?

Note: id === null is for equality comparison.

If is a state variable like

const [id, setId] = useState(initialValue);

then do it like this:

const stopSearching = () => {
    setId(null)
  };

If it is not a state variable, then to trigger rerender, it need to be a prop and there must be some function to change id prop.

Since I can't understand the query exactly, it will be better to add your code in codesandbox.io.

For now, I am adding a method,

const [getId, setId] = useState(0);
//I am taking id 0 as initial value, you can pick any other value
  
  const setActiveLocation = (id) => {
    setId(id);
  }
  const stopSearching = () => {
    setId(null)
  };
  <IconButton onClick={stopSearching} edge="end">
    <ClearIcon />
  </IconButton>
  {console.log(getId)}
  {filteredLocations.map((location, index) => (
     <LocationWidgetItem
        key={index}
        location={location}
        onClickLocation={() => setActiveLocation(location.id)}
          selectedLocation={location.id === getId}
     />)}
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

the id is state variable, ive tried this solutions but it doesnt work, the console id is undefined in jsx
the id i mean is in const [id, setId]
selectedLocation={location.id ==id}
0

I think you have to set it with setId

const stopSearching = () => {
    setId(null)
};

so that will automatically invalidate the previous content and will set the

    selectedLocation={location.id ==getId}

to false

Improve this answer

1 Comment

const[getId, setId] = useState(id) just like this?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.