REACTdice interactive component

JavaScript
1

Interactive Component

I’ve been following the tutorial for a tic tac toe game, the basic introduction at reactjs.org, it occurred to me rather than replacing the square with an ‘X’ I should be able to add a function to roll a random number between 1-6 as if rolling a dice.
but being new to REACT, JSX & ES6, I’m not sure how to pass this function in… any additional explanation would be appreciated.

on line 10, they change the square’s content to an X, so I’m thinking that’s where I should write the function, but it also looks like they break that out into a helper function later in the tutorial… so that might be considered better practice, I’ve even found an NPM Dice module I’d like to play with next, but I want to understand the basic’s first before I start trying to add that.

class Square extends React.Component {
    constructor(props) {
    super(props);
    this.state = {
      value: null,
    };
  }
  render() {
    return (
      <button className="square" onClick={() => this.setState({value: 'X'})}>
        {this.state.value}
      </button>
    );
  }
}

class Board extends React.Component {
  renderSquare(i) {
    return <Square value={i} />;
  }

  render() {
    const status = 'Next player: X';

    return (
      <div>
        <div className="status">{status}</div>
        <div className="board-row">
          {this.renderSquare(0)}
          {this.renderSquare(1)}
          {this.renderSquare(2)}
        </div>
        <div className="board-row">
          {this.renderSquare(3)}
          {this.renderSquare(4)}
          {this.renderSquare(5)}
        </div>
        <div className="board-row">
          {this.renderSquare(6)}
          {this.renderSquare(7)}
          {this.renderSquare(8)}
        </div>
      </div>
    );
  }
}

class Game extends React.Component {
  render() {
    return (
      <div className="game">
        <div className="game-board">
          <Board />
        </div>
        <div className="game-info">
          <div>{/* status */}</div>
          <ol>{/* TODO */}</ol>
        </div>
      </div>
    );
  }
}

// ========================================

ReactDOM.render(
  <Game />,
  document.getElementById('root')
);

tutorial fork

2

The question here is, does rolling a dice change the component’s state?

3

My question is how do I pass a function into the component? I can generate a random roll in javascript

function randomIntFromInterval(1,6)
{
    return Math.floor(Math.random()*(max-min+1)+min);
}

but how do I get that value to show up on the square in the REACT component?
so on line ten where it sets the value to ‘X’, I want it to set random1-6, but not familiar with the syntax to pass it in as a function… instead of hardcoded to a letter

4

because it’s can change, I assume it should be a state instead of a property

5

Define a function within your class, then reference it from within the click handler using this.

import React, { Component } from 'react';

class Square extends React.Component {
    constructor(props) {
    super(props);
    this.state = {
      value: null,
    };
  }

  generateRandom(min, max) {
    return Math.floor(Math.random()*(max-min+1)+min);
  }

  render() {
    return (
      <button
        className="square"
        onClick={
          () => this.setState(
            {value: this.generateRandom(1, 6)}
          )
        }>
        {this.state.value}
      </button>
    );
  }
}

export default Square;

As Dormilich says, at some point it makes sense to ask what actually needs to be in state, but personally, I’d concentrate on building whatever you are building, then once you have it working, look at ways to refactor.

1 Like
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.