React states and props between classes

React states and props between classes
0

#1

This is just a component of my app that I want to use for learning react. I am having trouble toggling the state of letter in my Board class that i’m trying to pass down into my squares as a prop on click.

function board(){
  console.log(gameVar.letter);
  gameVar = {
    letter: arguments[1],
    mode: arguments[0]
  }
  
  
  class Square extends React.Component{
    constructor(props){
      super(props); 
      this.state = {};
    }
    
    xo(){
      this.setState({letter: this.props.values})
    }

    render(){
      return(
        <div>
          <button className='boxes' onClick={() => this.xo()}>
            {this.state.letter}
          </button>
        </div>        
      );
    }   
  }
  
  
  class Game extends React.Component{
    constructor(props){
      super(props);
      this.state = {
        letter: undefined
      };
    }
    toggle(){
      let letter = this.state.letter === "O"? "X":"O";
      this.setState({letter: letter});
    }
    
    square() {
      this.toggle();
      return <Square values={this.state.letter} />;
    }
    
    render(){
      return(
        <div className='justify'>
          {this.square()}
          {this.square()}
          {this.square()}
          {this.square()}
          {this.square()}
          {this.square()}
          {this.square()}
          {this.square()}
          {this.square()}      
        </div>
      );
    }
  }
  
  
  ReactDOM.render(
  <Game />,
  document.getElementById('root')
  );
}

#2

I’ve edited your post for readability. When you enter a code block into the forum, remember to precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.