Показать текст при клике на элементе и спрятать предыдущий текст при клике на другом элементе

Question

Помогите, пожалуйста: есть список имен, по клику по имени должен появляться скрытый текст(это сделано), но как сделать чтоб этот скрытый текст исчезал с предыдущих элементов как только кликнешь на новый?

  
  function showText(e){
    e.preventDefault()
    let targetBlock = e.currentTarget.lastChild.lastChild
    filteredItems.map(el => {
      if(targetBlock.classList.contains('hidden')){
        targetBlock.classList.add('visible')
      }
  })
}
    return (
      <div>
        {filteredItems.map(el => {
           const {id, name, job, text} = el
           return (
           <article key={id} id={id} onClick={showText}>
             <div>
               <h3>{name}</h3>
               <div className="hidden">
                  <h5>{job}</h5>
                  <p>{text}</p>
               </div>
             </div>
            </article> 
           )
        })}
      </div>
    );
  }```

Answer 1

Надо добавить новый state который будет хранить идентификатор активного элемента.

const [id, setId] = useState(null);

И при клике на элемент добавить его id к этому стейту.

{users.map(el => (
   <div key={el.id} onClick={() => setId(el.id)}>
       <li>{el.name}</li>
       {el.id === id && <span className="hidden">{el.username}</span>}
   </div>
))}

Полный код:

export default function App() {
  const [users, setUsers] = useState([]);
  const [id, setId] = useState(null);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((response) => response.json())
      .then((json) => setUsers(json));
  }, []);

  return (
    <div className="App">
      {users.map(el => (
        <div key={el.id} onClick={() => setId(el.id)}>
          <li>{el.name}</li>
          {el.id === id && <span className="hidden">{el.username}</span>}
        </div>
      ))}
    </div>
  );
}

БЛОГ НА HUSL

Показать текст при клике на элементе и спрятать предыдущий текст при клике на другом элементе

Ответы (1 шт):