React toggle style on mapped element on click


A React newbie here. A very simple thing that I just can’t seem to get right.

I want to change the class on the clicked element from my map, not all of them.

E.g if I click on element with an id of 1, it should have a class of ‘active-color’. If I then click on element with an id of 2, that element should then take class ‘active-color’ and id 1 should not have this class anymore.

I’ve tried many different solutions, but can’t seem to get this right. It doesn’t seem to like me using the hook in my handler function here and returns an error: TypeError: setActive is not a function.

Any ideas or other solutions will be much appreciated!


const ListItems =  () => {

  const { isActive, setActive} = useState(false)
  const { item, dispatch } = useContext(AppContext);

  const handler = (event) => {
        dispatch({
            type: 'SET_ITEM',
            payload: event.currentTarget.dataset.index,
        });
    setActive(!isActive);
    };


  return (
    <div className="container">
      <h2 className="smallheader">Please choose one</h2>
      <div className="flex flex-center">
      {ITEMS.map((item) =>
        <div className={isActive ? 'active-color' : 'card'} data-index={item.value} key={item.id} onClick={handler}>
        <span
          className="card-header">{item.name}</span>
        <span className="card-description">{item.description}</span>
        </div>
      )}
      </div>
    </div>
  )
};
 
 
export default ListItems;

Source: JavaSript – Stack Overflow

November 14, 2021
Category : News
Tags: conditional-statements | javascript | react hooks | react-context | reactjs

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.