I got a following issue. This is my array:
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"
}
}
]
And those buttons:
const Buttons = () => {
return (
<div>
{countries.map((country) => (
<Button key={country.id} />
))}
</div>
)
}
What needs to happen is onClick, under the button, one content would be shown, where array element ID = button id (key). The code beneath is hardcoded to show always the content of the first element and I can't figure how to pass the ID so that it works properly.
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 Button
You were close, you just weren't correctly passing the data into Button.
All you needed to do was pass the content for each button (each element in countries) into the Button component in your map in Buttons.
Before, you were simply accessing the array that you had stored, see below for how you should've done it.
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>
);
};
You should mep method.
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>