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"));