Как отрендерить контент при клике?

import React, {Component} from 'react'; 
import Header from './Header'; 
 
class Header extends Component { 
    render() { 
        return ( 
            <div> 
                {this.props.items.map((item, index) => 
                    <li key={index} onClick={() => this.props.addToArray(item.id)}>{item.id}</li> 
                )} 
                <span onClick={() => console.log(this.props.items)}>test</span> 
            </div> 
        ); 
    } 
} 
 
class App extends Component { 
    state = { 
      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' 
    } 
]} 
 
    addToArray = (id) => { 
      this.setState(state => { 
        return { 
          menu: [...state.menu, {id, link: 'link'}] 
        } 
      }) 
    } 
 
    render() { 
        return ( 
            <div> 
                <Header items={this.state.menu} addToArray={this.addToArray}/> 
            </div> 
        ); 
    } 
} 
 
export default App;