import React, { Component } from 'react';
    import './App.css';
    import MainTool from './components/Layout/MainTool/MainTool.js';
    import Aux from './hoc/Aux.js';

    class App extends Component {

      state = {
        MainList: [
          "GamePlay",
          "Visuals",
          "Audio",
          "Story"
        ],
        color: "white"
      }

      changeEle = () =>{
        this.setState({color : "red"});
      }

      render() {
        return (
          <Aux>
            <MainTool MainList = {this.state.MainList}
            change = {this.changeEle}
            color = {this.state.color}/>
          </Aux>
        );
      }
    }

    export default App;

import React from 'react';
import './MainTool.css';
import CheckBlock from '../../CheckBlock/CheckBlock';

const MainTool = props => {
    return (
        <div className = "mtborder">
            <CheckBlock MainList = {props.MainList}
            change = {props.change}
            color = {props.color}/>
        </div>
    );
};

export default MainTool;

import React from 'react';
import './CheckBlock.css';
import Aux from '../../hoc/Aux';

const CheckBlock = props => {

console.log(props.change);
console.log(props.color);

    let mainList = [];

    for(let i = 0; i <= 3; i++)
    {
        mainList[i] = <li key = {i}
        className = "nameBox">{props.MainList[i]}
        <div onClick = {props.change}
        style = {{backgroundColor: props.color}}
        className = "clickBox"></div></li>
    }

    //console.log(dubi());

    return (
        <Aux>
            <ul className = "mainList">{mainList}</ul>
            <button>Enter</button>
        </Aux>
    );
};

export default CheckBlock;