score:0

i created a sample code with the minimum change i can do to your code. but i must remind you that this is not (not even near) the best way to handle it.

import overview from "./overview";
import performance from "./performance";
import stability from "./stability";

export default class menu extends react.component {
    constructor(props){
        super(props);
        this.state = {
            selectedview: "overview"
        }
    }

    changeview = (view) => {
        this.setstate({selectedview: view});
    }

  render() {
    return (
            <grid>
              <griditem columnspan = {3}>
                 <h3>menu selection</h3> <br/>
                 <h1 onclick={() => this.changeview("overview")}> overview </h1> <br/>
                 <h1 onclick={() => this.changeview("performance")}> performance </h1> <br/>
                 <h1 onclick={() => this.changeview("stability")}> stability </h1>
              </griditem>
              <griditem columnspan = {9}>
                 <h3>info</h3> <br/>
                 {this.state.selectedview === 'overview' && <overview />}
                 {this.state.selectedview === 'performance' && <performance />}
                 {this.state.selectedview === 'stability' && <stability />}
              </griditem>
            </grid>
        );
    }
}

Related Query

More Query from same tag