How to change state only one item and return original when click other

Question

I have a dialog like this, i want to change state of each face when i click and if i click on other face, current face return to original, for example when i click neutral it show green like this pic , and when i click satisfied, the neutral face return to grey one and the satisfied show it color, how can i do this in react-native, i know how to change state of each item,and like when click it change color , but when i click other i don't know how efficent way to make current item to original state color, so:

HOW CAN I MAKE THEM TO ORIGINAL STATE IF CLICK OTHER?

Thank you a lots

Answer 1

The fastest solution would be:

1. crete a state variable that is an array of bool:

   const[clicked, setClicked] = useState(new Array(3).fill(false))
   

2. on face click set to true the index of the face that you want to color:

   const onClick = (event, index) => {
      let result = [...clicked];
      result= result.map(x => false); // reset previous click
      result[index] = true;
      setClicked(result);
   }  
   

3. put a condition on html to render colored face/greyed face based on clicked current status:

   {clicked[index] && <ColoredIcon />}
   {!clicked[index] && <GreyedIcon />}