State is being updated but not displaying

Question

I have a text box a clickable button and another non-clickable button I use to display a number when the clickable button is pressed I want the value in the text box to be displayed in the other button. this.state is being updated but not being displayed.

This is my first time working with react please give me any feedback.

class GameBoard extends React.Component {
  render() {
    return (
      <div className="gameBoard">
        <table>
          <tbody>
            <tr>
              <th><input id="trips" className="inp"></input></th>
              <th><button onClick={() => this.props.onClick("trips")}>place bet</button></th>
              <th><button className="bettingSquere" >{this.props.game.trips}</button></th>
            </tr>
          </tbody>
        </table>
      </div>
    );
}}

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      trips: 0,
    };
  }

  handleClick(type) {
    var state = this.state;
    state.trips=document.getElementById("trips").value;
    this.state=state;
  }

  render() {
    return (
      <div align="center">
        <GameBoard game={this.state} onClick={i => this.handleClick(i)} />
      </div>
    );
  }
}

export default App;

You need to use `this.setState` method when you are updating the state. You cannot change the state by directly modifying. — euvs, Nov 05 '19 at 01:24

devserkan · Accepted Answer · 2019-11-05T07:19:13.823

You should go through the documentation again. Do not mutate or change your state directly as you do in your handleClick method. You should use setState method to update your state. Also, you don't need to change your input values like that. You can use onChance and set another state there.

class GameBoard extends React.Component {
  state = {
    inputValue: null
  };

  handleInputChance = e =>
    this.setState({
      inputValue: e.target.value
    });

  handleClick = () => this.props.onClick(this.state.inputValue);

  render() {
    return (
      <div className="gameBoard">
        <table>
          <tbody>
            <tr>
              <th>
                <input
                  id="trips"
                  className="inp"
                  onChange={this.handleInputChance}
                />
              </th>
              <th>
                <button onClick={this.handleClick}>place bet</button>
              </th>
              <th>
                <button className="bettingSquere">{this.props.trips}</button>
              </th>
            </tr>
          </tbody>
        </table>
      </div>
    );
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      trips: 0
    };
  }

  handleClick(type) {
    this.setState({ trips: type });
  }

  render() {
    return (
      <div align="center">
        <GameBoard
          trips={this.state.trips}
          onClick={i => this.handleClick(i)}
        />
      </div>
    );
  }
}


ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root" />

Maybe a few things more, like picking the variable names wisely. Also, you don't need to pass your whole state like that (game: this.state). Just pass the props you are going to need. ie, trips: this.state.trips.

State is being updated but not displaying

1 Answers1