Javascript – react with header navigation

I'm reacting and started this project as a sandbox to experiment with. I've implemented a main page that has a header and some content. The content is selected in the header. I wonder how the best practices for reacting and other ways to implement it are.

In the main app, as an index, we keep the index of the content we want to display and pass the header as a property a reference to the function that handles the index state

    Class app extends component {
Constructor() {
Super();
this.state = {
cidx: 0,
//Content:[[[[, ]}

this.updateContent = this.updateContent.bind (this);
this.getContent = this.getContent.bind (this);
}

updateContent (idx) {
this.setState ({cidx: idx});
}

getContent () {
// return this this.state.content[this.state.cidx];
switch (this.state.cidx) {
Case 0:
return 
      Case 1:
return 
    }
}

render () {
const Content = this.getContent ();
Return (
      
{Content}
); } } Export standard app;

So we can paste the content into our rendering function based on the user interaction with the header. I used a switch statement in getContent to avoid having an array of objects in memory all the time. Is it actually better in terms of performance?

This is the header code

Class header extends component {
Constructor (props) {
Super (props);
}

render () {
const items = this.props.textItems.map (
(Article, index) => {
return {this.props.updateContent (index)}}> {item}
      }
);
Return (
      
{Items}
); } } Export standard headers;

A working version of the project can be found at https://glitch.com/~absorbing-buzzard