<div id="root"></div>
const firstArr = [
{ id: 1, name: 'codepen'},
{id: 2, name: 'codesandbox'}
]
const secondArr = [
{ id: 1, name: 'github'},
{id: 2, name: 'codepen'},
{ id: 3, name: 'bitbucket'},
{ id: 4, name: 'codesandbox'}
]
class App extends React.Component {
state = {
change: true
}
handleChange = (event) => {
this.setState({change: !this.state.change})
}
render() {
const { change } = this.state
return(
<div>
<div>
<button onClick={this.handleChange}>Change</button>
</div>
<ul>
{
change ?
firstArr.map((e) => <li key={e.id}>{e.name}</li>)
:
secondArr.map((e) => <li key={e.id}>{e.name}</li>)
}
</ul>
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById("root"));
View Compiled
This Pen doesn't use any external CSS resources.