Estou criando uma página de personagens, nela tem uma foto de cada personagem e quando clico na foto ela abre um modal exibindo mais informações do personagem. Porém em vez de abrir um só modal, ele abre todos de uma vez.
import React, { useEffect, useState } from "react";
import axios from "axios";
import Modal from "react-modal";
import styles from '../../styles/Characters/Characters.module.css'
Modal.setAppElement("#__next");
export default function MainCharacters (characters) {
const [open, isOpen] = useState(false);
const [itemSelecionado, setItemSelecionado] = useState(null);
const [items, setItems] = useState([]);
const onItemClicked = (item) => {
setItemSelecionado(item);
isOpen(true);
}
const baseURL = "https://hp-api.herokuapp.com/api/characters"
const [resposta, setResposta] = useState()
useEffect(() => {
axios.get(baseURL) .then((response) => {
setResposta(response.data);
})
}, [])
return (
<main>
<ul className={styles.ulCards}>
<div className={styles.container}>
{resposta &&
resposta.map((characters ,index)=>{
return(
<li className={styles.ulCards_li}>
<div key={index}>
<div className={styles.divImageCard} onClick={onItemClicked}><img alt={characters.name} src={characters.image} width='180px' height='244px'></img></div>
<div className={styles.divCharactersName} onClick={onItemClicked}><h3 className={styles.charactersName}>{characters.name}</h3></div>
<Modal isOpen={open}>
<p>{characters.name}</p>
</Modal>
{items.map((item, index) => (
<li key={'item-${index}'} onClick={() => onItemClicked(item)}>
{item.name}
</li>
))}
</div>
</li>
)
})}
</div>
</ul>
</main>
)
}
characters.name
oitemselecionado.name
acvho que resolve. Quando eu digo tirar é colocar a tag modal fora doul
onitemclicked
você deveria passar de alguma forma ocharacters[index]
pra ele entender que o item selecionado é esse personagem. Testando aqui ele passa o elemento do dom.