"我如何将样式仅应用于单击的元素 [React]"

Question

I'm trying to apply conditional styles in React.<\/em> I need to apply an animation when use click on delete button but this is applied to every element from the array<\/em>

import React, { useState } from 'react';

import './styles.css';

const Element = () => {
  const [onDelete, setOnDelete] = useState(false);
  const list = [
    {
      name: 'Jhon',
      age: '20',
    },
    {
      name: 'Maria',
      age: '25',
    },
  ];

  return (
    <>
      {list.map((item) => (
        <ul className={onDelete ? 'onDelete-apply' : ''}>
          <li>{item.name}</li>
          <li>{item.age}</li>
          <button onClick={() => setOnDelete(true)}>
            Delete
          </button>
        </ul>
      ))}
    </>
  );
};

export default Element;

Answer 1

You should be traking the element that it is clicked by its index, insted of true or false, on click you set the index of the clicked item in the state and then check if that index is the same as the index of the element when rendered

import React, { useState } from 'react';

import './styles.css';

const Element = () => {
const [deletedIndex, setDeletedIndex] = useState(false);
      const list = [
        {
          name: 'Jhon',
          age: '20',
        },
        {
          name: 'Maria',
          age: '25',
        },
      ];
    
      return (
        <>
          {list.map((item, i) => (
            <ul key={i} className={deletedIndex === i ? 'onDelete-apply' : ''}>
              <li>{item.name}</li>
              <li>{item.age}</li>
              <button onClick={() => setDeletedIndex(i)}>Delete</button>
            </ul>
          ))}
        </>
      );
export default Element;