Finding the correct component to hold your state is important. Here you want to move your mode to the parent component state and access it from child component as a prop.

I see your child component is setting mode which is a little tricky since it will now be held in the parent state, so how to do that ?

You create a callback in the parent and set that callback as a prop when you call your component in the parent render.

You will then need to set your onClick event handler on each image element to call an event handler (in this case handleClick) in your child component.

This event handler will then grab the id of the target element and pass that to the parent using this.props.onUpdateMode (the callback that we passed as a prop).

The parent callback receives the data from the child, and updates state accordingly.

Reference: Lifting State Up

import React, {Component} from 'react';

import './App.css';

import IconBar from './components/icon-bar';

import Events from './components/events';



class App() extends Component {

  constructor(props) {

        super(props)

        this.state = {

            mode: null

        }

        this.updateMode = this.updateMode.bind(this);

    }



  updateMode = (newMode) => {



      this.setState({mode: newMode});

  }





  return (

    <div className=App>

      <h1 className=Title>ENAKS</h1>

      <IconBar onUpdateMode={this.updateMode}  mode={this.state.mode} />

      <Events />

  <div className=mainModeFrame><p1>{this.state.mode}</p1></div>

    </div>

  );

}



export default App;

import React, {Component} from 'react';

import '../App.css';



class IconBar extends Component {

    constructor(props) {

        super(props)



        this.handleClick=this.handleClick.bind(this);

    }



    handleClick(e) {



      let mode = e.target.id;

      this.props.onUpdateMode(mode);



    }





    render() {

        return(

                <div className=icon-bar>

                <div className=iconHolder>

                <img src=/images/2dlogo.png id=2d alt= className=icons onClick={this.handleClick} />

                <img src=/images/3dlogo.png id=3d alt= className=icons onClick={this.handleClick}/>

                <img src=/images/flag.png id=edit alt= className=icons onClick={this.handleClick}/>

                <img src=/images/tracker.png id=track alt= className=icons onClick={this.handleClick}/>

        <div>{this.props.mode}</div>

                </div>

         </div>

              )

    }

}





export default IconBar;