Есть всплывающее окно(PopUp), в нем есть массив кнопок отрисованные через map. С лева, есть контент который должен зависить от вида нажатой кнопки. При нажатии на 3ю кнопку должен быть отрисован контент, При нажатии на 5ю отрисоваться должен совсем другой контент. Как можно это реализовать?
Контент с правой стороны массив.
В принципе довольно просто т.к. весь массив ты перебираешь при помощи map Создаешь вот такую функцию
const [selectedProduct, setIsSelectedProduct] = useState({})
const handleProductClick = (select) => {
setIsSelectedProduct(select);
}
т.е. в данном случае select берет нужный объект
затем тебе его надо передать при помощи клика. лучше всего это делать при помощи id Ниже пример перебора массива как передать данную функцию
{products.map((item) =>
<button onClick={() => handleProductClick(item.id)}
</button>
</div>
)}
ну а затем все вывести вот так
{products.map((item) => {
if (selectedProduct === item.id) {
return (
<p>{item.title}</p>
)
}