Мобильная версияУ меня есть страница, на которой отображается информация об учащихся. Сейчас я использую array.map() для отображения всех учащихся. На этой странице есть функция, с помощью которой вы можете щелкнуть по одному учащемуся, чтобы отобразить дополнительную информацию. Я использую функцию onClick для отображения компонента. Но когда вы нажимаете на ученика, компонент отображается у всех остальных учеников. Как я могу определить, что я нажал на ученика X и показал только информацию об X, а не об Y и Z?
Вот страница:
import React, { useState } из 'реагировать'; импортировать { BsFillCircleFill } из 'реагировать-значки/bs'; импортировать {FiSearch} из 'реагировать-значки/фи'; импортировать { IoIosArrowDropdown } из 'реагировать-значки/io'; импортировать * как цвета из '../../config/colors'; импортировать {Содержимое, Поиск} из './styled'; импортировать заголовок из «../../компоненты/подзаголовок»; импортировать DropInfo из '../../comComponents/DropInfo'; функция экспорта по умолчанию Relação() { const [информация, setInfo] = useState (ложь); const [стиль, setStyle] = useState('drop'); const handleDrop = (идентификатор) => { константа newInfo = информация; setInfo(!newInfo); console.log(идентификатор); константный новый стиль = стиль; переключатель (newStyle) { случай «падение»: setStyle('дроп-2'); перерыв; случай «капля-2»: setStyle('дроп'); перерыв; по умолчанию: setStyle('дроп'); перерыв; } }; const алунос = [ { идентификатор: 1, имя: «Мигель Морейра Родригес», спф: '000.000.000-00', }, { идентификатор: 2, имя: «Мигель Морейра Родригес», спф: '000.000.000-00', }, ]; возвращаться ( {alunos.map((aluno) => { если (информация) { возвращаться ( {aluno.nome} {' '} ЦПФ: {' '} {aluno.cpf}
handleDrop(aluno.id)} className={стиль} размер={24} /> ); } возвращаться ( {aluno.nome} {' '} ЦПФ: {' '} {aluno.cpf} ); })} ); }
А вот компонент:
импортировать React из 'реагировать'; импортировать {информацию} из './styled'; функция экспорта по умолчанию DropInfo() { возвращаться ( Имя {' '} Мигель Морейра Родригес
Цена за игру {' '} 000.000.000-00
РГ {' '} 0000000000.0
Насименто {' '} 19.12.2005
Игрея {' '} Адвентисты Эндересо {' '} Руа Хорхе Бразилино, 217, Католе
Сидаде/Эстадо {' '} Горизонт-CE
Телефон {' '} (85) 9-9198-0673
Гражданский статус {' '} Солтейро
Турма {' '} Профессор Карлос ); }
Чтобы лучше объяснить мою проблему, вот что происходит:
