React toggle class on click. Mapping list items

Question

I'm mapping items of object to list items. I would like to get changed class for specific item i clicked.

Currently all mapped items get class "Done" on click.

import React, {useState} from 'react';
import Tasks from '../data.json';


function List() { 
  const tasks = Tasks.Tasks
  const [isActive, setActive] = useState(false);

  const toggle = () => {
    setActive(!isActive);
  };

  return (
    <div>
      <ul>
        {
          tasks.map((item, i) => (
            <li
              className={isActive ? 'Done': ""}
              key={i}
              onClick={toggle}
            >
              {item}
            </li>
          ))
        }
      </ul>
    </div>
  )
}

export default List;

ArnaudV · Accepted Answer · 2020-09-15 18:33:24Z

2

You are giving the class Done whenever isActive is set to true, to each of your list item. Maybe try to initialize isActive like this:

const [isActive, setActive] = useState(null);
const toggle = (i) => {
  setActive(i);
};

and then give the Done class this way:

<li className={isActive === i ? 'Done': ""} key={i} onClick={() => toggle(i)}>{item}</li>

You can also store all of the active index in an array by initializing isActive this way:

const [isActive, setActive] = useState([]);

and then write your hook :

const toggle = (i) => {
  if (isActive.indexOf(i) === -1) {
    setActive([...isActive, i]);
  }
};

then you can do the following in order to give the class to all of the divs you clicked.

<li className={isActive.indexOf(i) !== -1 ? 'Done': ""} key={i} onClick={() => toggle(i)}>{item}</li>

edited Sep 15, 2020 at 18:33

answered Sep 15, 2020 at 18:23

ArnaudV

3412 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React toggle class on click. Mapping list items

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related