Tengo un problema siguiente. Esta es mi matriz:
const countries = [ { id: 1, props: { url: '/images/polska.jpg', title: 'Polska', width: width, content: "Text nr 1" } }, { id: 2, props: { url: '/images/francja.jpg', title: 'Francja', width: width, content: "Text nr 2" } }, { id: 3, props: { url: '/images/slovakia.jpg', title: 'Slovakia', width: width, content: "Text nr 3" } } ]Y esos botones:
const Buttons = () => { return ( <div> {countries.map((country) => ( <Button key={country.id} /> ))} </div> ) }Lo que debe suceder es onClick, debajo del botón, se mostraría un contenido, donde ID de elemento de matriz = ID de botón (clave). El código debajo está codificado para mostrar siempre el contenido del primer elemento y no sé cómo pasar la ID para que funcione correctamente.
const Button = () => { const [showContent, setShowContent] = useState(false) const content = countries[0].props.content console.log(content) return ( <div> <div className='button'> <button onClick={() => { setShowContent(!showContent) }}>show</button> </div> <div> {showContent ? content : null} </div> </div> ) } export default ButtonEstabas cerca, simplemente no estabas pasando correctamente los datos a Button.
Todo lo que tenía que hacer era pasar el contenido de cada botón (cada elemento en países) al componente Botón en su mapa en Botones.
Antes, simplemente estaba accediendo a la matriz que había almacenado, vea a continuación cómo debería haberlo hecho.
const Button = ({ content }) => { const [showContent, setShowContent] = useState(false); return ( <div> <div className="button"> <button onClick={() => { setShowContent(!showContent); }} > show </button> </div> <div>{showContent ? content : null}</div> </div> ); }; const Buttons = () => { return ( <div> {countries.map((country) => ( <Button key={country.id} content={country.props.content} /> ))} </div> ); };Deberías usar el método mep.
const { useEffect, useState } = React; const width = 100; const countries = [{ id: 1, props: { url: '/images/polska.jpg', title: 'Polska', width: width, content: "Text nr 1" } }, { id: 2, props: { url: '/images/francja.jpg', title: 'Francja', width: width, content: "Text nr 2" } }, { id: 3, props: { url: '/images/slovakia.jpg', title: 'Slovakia', width: width, content: "Text nr 3" } } ] const Button = () => { const [content, setContent] = useState() const handleClick = (id) => { const country = countries.find(x => x.id === id); setContent(country.props.content) } return ( <div> { countries.map((country) => ( <button onClick = {() =>handleClick(country.id)}> {`show content, id : ${country.id}`}</button> ))} <div> {content} </div> </div> ) } function App() { return ( <div className = "App"> <Button/> </div> ); } ReactDOM.render( <App/> , document.getElementById('root')); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script> <div id="root"></div>