reactjs - Not Able to Access the function from different Component

Question

I am working tic-tac-toe game here. I don't know what's wrong with my code am not able to access the function from other component.

import React from "react";
import '../App.css';
class Choosechar extends React.Component {
  constructor() {
    super();
    this.state = {};
    this.onRadioSubmmit = this.onRadioSubmmit.bind(this);
  }
  onRadioSubmmit() {
    this.props.charSelect(this.state)
  }
  render() {
    var showMenu = (this.props.menuVisible) ? 'show' : 'hide';
    return (
      <div className="App-main-content">   
          <div className={showMenu}>
              <div className="">
                  <div className="center">
                    <h1>Do you want to play as <b>X</b> or <b>O</b>?</h1>
                    <button id="x-char" className="xo-button x" onClick={this.onRadioSubmmit}>X</button>                    
                    <button id="o-char" className="xo-button o" onClick={this.onRadioSubmmit}>O</button>
                  </div>
                 </div>
              </div>       
      </div>
    )
  }
}
export default Choosechar;

in the above code am trying the to display character user wants to play whether the user can select 'X' or 'O'

Game.js
import React from "react";
import WinLine from './Gameboard/WinLine';
import Board from './Gameboard/Board';
import Choosechar from './Choosechar';
import '../App.css'
const winCombos = [
    [0, 1, 2], [3, 4, 5], [6, 7, 8],   //horizontal
    [0, 3, 6], [1, 4, 7], [2, 5, 8],   //vertical
    [0, 4, 8], [6, 4, 2]               //diagonal
  ];
class Game extends React.Component {    
    constructor(props) {
        super(props);
        this.state = {
            gameBoard:   Array.from(Array(9).keys()),
            menuVisible: true,
            showLine:    false,
            turn:        'X',
            turnToggler: 'X',
            user:        '',
            ai:          '',
            result:      '',
            winLine:     ''
          }
          this.minMax        = this.minMax.bind(this);
          this.gameOver      = this.gameOver.bind(this);
          this.checkWin      = this.checkWin.bind(this);
          this.checkTie      = this.checkTie.bind(this);
          this.bestSpot      = this.bestSpot.bind(this);
          this.startGame     = this.startGame.bind(this);
          this.charSelect    = this.charSelect.bind(this);
          this.changeTurn    = this.changeTurn.bind(this);
          this.handleClick   = this.handleClick.bind(this);
          this.emptySquares  = this.emptySquares.bind(this);
          this.playSound     = this.playSound.bind(this);
        }
        startGame() {
            //initialize start state
            this.setState({
              gameBoard:   Array.from(Array(9).keys()),
              menuVisible: true,
              showLine:    false,
              turn:        'X',
              turnToggler: 'X',
              user:        '',
              ai:          '',
              result:      '',
              winLine:     '',
            });
            //clear the board spaces of any text/styling
            let cells = document.querySelectorAll('.cell');
            for (let i = 0; i < cells.length; i++) {
              cells[i].innerText = '';
              cells[i].style.backgroundColor = 'initial';
              cells[i].style.pointerEvents = 'initial';
            }
          }
          
          charSelect(e) {    
            //assign selection to user, assign ai not selected
            debugger;
            let userCharacter = e.currentTarget.innerHTML;
            let aiCharacter = (userCharacter === 'X') ? 'O' : 'X';
            //update game state
            this.setState((prevState, props) => {
              return {
                user: userCharacter,
                ai: aiCharacter,
                menuVisible: false
              }
            });
            //default start char is 'X', if user selects 'O' invoke ai to go
            if (aiCharacter === 'X') {
              this.changeTurn(this.bestSpot(), aiCharacter);
            }
          }                        
        
          render() {
            var showPlayButton = (this.state.result === '') ? 'invis' : 'vis d-flex justify-content-center';
            return (
              <div>
                <div className={showPlayButton}>
                  <button id="replay-button" className="btn btn-danger" onClick={this.startGame}>Play Again</button>
                </div>
                <Choosechar
                  menuVisible={this.state.menuVisible}
                  charSelect={this.props.charSelect}  
                />
              </div>
            );
          }
}

export default Game;

Hi abhijeet thanks as per your updated code have updated mine but am still getting error have added the screenshot as well please have look at it

question from:https://stackoverflow.com/questions/66067173/not-able-to-access-the-function-from-different-component

Answer 1

You need to change "this.props" to "this"

<Choosechar menuVisible={this.state.menuVisible} charSelect={this.charSelect}/>

More about "this" here

As well as you need to pass "props" in super() in "Choosechar" class component to use "this" further in component

class Choosechar extends React.Component {
  constructor(props) {
    super(props);

more about super here