Estoy almacenando mis datos en una matriz JS. Después de eso, estoy usando la función de mapa para mostrar componentes con datos específicos. Hasta entonces, todo funciona. Después de hacer clic en el componente, quiero mostrar un componente PopUp que muestre datos más específicos del archivo data.js. ¿Cómo puedo pasarlo como accesorios y hacer coincidir los datos correctos con el componente correcto? En este momento, después de hacer clic, siempre me muestra el mismo texto.
Mi archivo data.js:
export const data = { projects: [ { name: "Project1", image: require("../assets/img/Project1.PNG"), description: "Set number 1", technologies: "REACT", link: "github.com", }, { name: "Project2", image: require("../assets/img/Project2.PNG"), description: "Project number 2 - description", technologies: "C#", link: "github.com", },Este es mi PopUp.js que debería mostrar datos más específicos:
function Popup({ project, description }) { return ( <Wrapper> <p>Project name is: {project}</p> <p>Description is: {description}</p> </Wrapper> ); }Y aquí mapeo mis datos y aquí está el problema. ¿Cómo puedo pasarlo?
function Projects() { const [isOpen, setIsOpen] = useState(false); const togglePopup = () => { setIsOpen(!isOpen); }; return ( <Wrapper> {data.projects.map((proj) => ( <ProjectContainer background={proj.image} onClick={togglePopup}> {isOpen && ( <Popup project={proj.name} description={proj.description} /> )} </ProjectContainer> ))} </Wrapper> ); }Realmente gracias por todas las respuestas!
Puede usar índice en lugar de booleano:
function Projects() { const [isOpen, setIsOpen] = useState('nothing'); return ( <Wrapper> {data.projects.map((proj, index) => ( <ProjectContainer background={proj.image} onClick={()=>setIsOpen(oldIndex => index === isOpen ? 'nothing' : index)}> {isOpen === index && ( <Popup project={proj.name} description={proj.description} /> )} </ProjectContainer> ))} </Wrapper> ); }El estado almacena el índice de la ventana emergente abierta actual.
El evento ProjectContainer onClick verifica si el índice actual es el mismo que el suyo y cambia en consecuencia: a 'nada' si están abiertos actualmente, a su índice si no lo están.
La condición {isOpen === index && ( se usa para mostrar solo la ventana emergente abierta actualmente, es decir, el índice actual.
De esta manera, puede alternar un proyecto individual y no todos.