score:0

try this out:

just place the curly brace in the classname prop and pass it a ternay expression to toggle between the two classes you want to based on active state just like that:

const [active, setactive] = usestate(false);
const toggleactive = () => setactive(prevstate => !prevstate);

return (
  <div classname="containe">
    {movies.map((moviedetails, index) => {
      // console.log(index)

      return (
        <div classname="card">
          <div classname="card-body">
            <button classname="btn-fermer" onclick={() => removeitem(index)}>
              close
            </button>

            <h6 classname="card-id" key={moviedetails.id + index}>
              id:{moviedetails.id}
            </h6>
            <p classname="card-title">
              <strong>{moviedetails.title}</strong>
            </p>
            <p classname="card-category">catégorie: {moviedetails.category}</p>
            <p classname={active ? "card-dislike active":"card-like active"}>
              like count :{moviedetails.likes}
            </p>
            <p classname={active ? "card-like active":"card-dislike active"}>
              like count :{moviedetails.dislikes}
            </p>
          </div>
          <button classname="card-button" onclick={toggleactive}>
            toggle likes and dislikes
          </button>
        </div>
      );
    })}
  </div>
);


Related Query

More Query from same tag