Question 193246 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – React Typescript – change all object value onclick

I need to change the selected item onClick. So I want to change all the array’s "isSelected" value to false and just make the one that has clicked to true.

export default function TimerSelector() {
  const timerOptions: TimerOptions[] = [
    {
      text: "Daily",
      isSelected: true,
    },
    {
      text: "Weekly",
      isSelected: false,
    },
    {
      text: "Monthly",
      isSelected: false,
    },
  ];

  return (
    <Box>
      {timerOptions.map((option) => {
        return (
          <Box
            key={option.text}
            bg={option.isSelected ? theme.bg.primary : theme.bg.boxes}
            onClick={() => {
              //change all the timerOptions "isSelected" value to false and only this option.isSelected to true 
            }}
          >
            <Text color={option.isSelected ? "#fff" : "#000"}>
              {option.text}
            </Text>
          </Box>
        );
      })}
    </Box>
  );
}
Tags:

2

Answers


  1. 0

    You have to use useState hook, and once you click on the button you have to update the data in the state, you will get a change on the UI, once your state is updated, as you can see below code.

    export default function TimerSelector() {
    const [timerOptions, setTimerOptions] = useState<TimerOptions[]>([
        {
          text: "Daily",
          isSelected: true,
        },
        {
          text: "Weekly",
          isSelected: false,
        },
        {
          text: "Monthly",
          isSelected: false,
        },
      ])

    const handleOnClick = (isSelected: Boolean) => {
        const newArr = timerOptions.map(d => ({...d, isSelected: isSelected}))
        setTimerOptions(newArr);
    }
  
    return (
      <Box>
        {timerOptions.map((option) => {
          return (
            <Box
              key={option.text}
              bg={option.isSelected ? theme.bg.primary : theme.bg.boxes}
              onClick={() => {
                handleOnClick(option.isSelected)
                //change all the timerOptions "isSelected" value to false and only this option.isSelected to true 
              }}
            >
              <Text color={option.isSelected ? "#fff" : "#000"}>
                {option.text}
              </Text>
            </Box>
          );
        })}
      </Box>
    );
}
    Login or Signup to reply.
  2. 0 
    export default function TimerSelector() {
 const [timerOptions,setTimerOptions] = useState([
{
  text: "Daily",
  isSelected: true,
},
{
  text: "Weekly",
  isSelected: false,
},
{
  text: "Monthly",
  isSelected: false,
},
]);


 const onClickEvent = (selectedIndex: int) => {
    const updatedOptions = timerOptions.map(d => ({...d, isSelected: 
   false}));

  updatedOptions[selectedIndex].isSelected=true;
    setTimerOptions(updatedOptions);
}



return (
    <Box>
  {timerOptions.map((option,index) => {
    return (
      <Box
        key={option.text}
        bg={option.isSelected ? theme.bg.primary : theme.bg.boxes}
        onClick={() => {
         onClickEvent(index);
        }}
      >
        <Text color={option.isSelected ? "#fff" : "#000"}>
          {option.text}
        </Text>
      </Box>
    );
  })}
</Box>
   );
   }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search