How to dynamically change className of a component in React?

I want to make a button check which add a new calssName to my list. I use a function to update a state and take the string. If you want to help me be more specific because I am a beginner. Thanks !

const [check, setCheck] = useState({
  id: '',
  status: false
});

This is the function. With ‘on’ I take the string to add to id.

let complet = (on) =>{
  if(check.status == false){
    setCheck({
      id: on,
      status: true
    })
  }
  else {
    setCheck({   
      id: on,
      status: false
    })
  }
}

And how I Display the list and how I check correspond to the string.

return(
    <div className='display'>
    { list.map( (list,index) => (
        <div className={ check.status && check.id == list  ? 'lista complet' : 'lista'} key= {index} id='lista' >
            {list}
            <button className='btnCheck' onClick={complet.bind(this, list)}> <FcCheckmark/> </button>
            <button className='btnRemove' onClick={remove.bind(null, list)}> <BsTrash/> </button>
        </div>
    ))}
    </div>
)

Answer

If you want to store the checked ids and the unchecked ids, you must change your state variable because currently it can only stores a single element. However, it seems you are rendering a list of elements that can be checked individually

Here is a possible solution :

function App({list}) {
  const [checkIds, setCheckIds] = useState(() => { 
    const item = localStorage.getItem('checkIds');
    return item ? JSON.parse(item) : {};
  });

  // reset the checkIds when the list is updated
  useEffect(() => setCheckIds({}), [list]);

  // save the checkIds into the local storage
  useEffect(() => {
    localStorage.setItem('checkIds', JSON.stringify(checkIds));
  }, [checkIds]);

  function checkId(id) {
    setCheckIds({...checkIds, [id]: true);
  }

  function uncheckId(id) {
    setCheckIds({...checkIds, [id]: false);
  }

  return (
    <div className='display'>
      {list.map(id => (
        <div key={id} id={id} className={check[id] ? 'lista complet' : 'lista'}>
            {id}
            <button className='btnCheck' onClick={() => checkId(id)}> 
              <FcCheckmark/> 
            </button>
            <button className='btnRemove' onClick={() => uncheckId(id)}> 
              <BsTrash/>
            </button>
        </div>
    ))}
    </div>
  )
}