class List extends Component {
render() {
const {activeElement, items, setActiveElement} = this.props;
return (
<div style={{display: 'flex'}}>
<div style={{marginRight: 50}}>
{items.map((item, index) => (
<li key={index} onClick={() => setActiveElement(item)}>
{item.id}
</li>
))}
</div>
{activeElement ? (
<div>
<h2>{activeElement.id}</h2>
</div>
) : null}
</div>
);
}
}
class App extends Component {
state = {
activeElement: null,
menu: [
{
link: "link1",
id: "Articles"
},
{
link: "link2",
id: "Contacts"
},
{
link: "link3",
id: "Posts"
},
{
link: "link1",
id: "Lorem"
},
{
link: "link2",
id: "Ipsum"
},
{
link: "link3",
id: "Test"
}
]
};
setActiveElement = (item) => {
this.setState({
activeElement: item
})
}
render() {
return (
<div>
<List
items={this.state.menu}
activeElement={this.state.activeElement}
setActiveElement={this.setActiveElement}
/>
</div>
);
}
}