[初心者向け]Reactでスロットゲーム

reactでスロットゲーム作りました

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';

class SlotGamePage extends Component {
    constructor(props) {
        super(props)
        this.state = {one: null, two: null, three: null, result_score: 0}
    }



    stop_slot(slot_number) {

        const num = Math.floor(Math.random() * 3)
        if (slot_number == 1 && this.state.one == null) {
            this.setState({one: num})
        } else if (slot_number == 2 && this.state.two == null) {
            this.setState({two: num})
        } else if (slot_number == 3 && this.state.three == null) {
            this.setState({three: num})
        } else {
            return
        }
    }

    restartSlot() {
        if (this.state.one != null && this.state.two != null && this.state.three != null) {
            if (this.state.one == 0 && this.state.two == 0  && this.state.three == 0){
                let rs = this.state.result_score + 100
                this.setState({result_score: rs})
            } else if (this.state.one == 1 && this.state.two == 1 && this.state.three == 1) {
                let rs = this.state.result_score + 100
                this.setState({result_score: rs})
            } else if (this.state.one  == 2 && this.state.two  == 2 && this.state.three == 2) {
                let rs = this.state.result_score + 500
                this.setState({result_score: rs})
            }
        }

        this.setState({one: null, two: null, three: null})
    }

    render() {
        return (
            <div>
                <p>スロット</p>
                <ScoreBox one={this.state.one} two={this.state.two} three={this.state.three}></ScoreBox>
                <SlotBox actionStopSlot={(num) => this.stop_slot(num)}></SlotBox>
                <RestartButton actionRestart={() => this.restartSlot()} />
                <ResultBox result_score={this.state.result_score}></ResultBox>
            </div>
        )
    }
}

const SlotBox = (props) => {
    return (
        <div>
            <button onClick={() => props.actionStopSlot(1)}>①</button>
            <button onClick={() => props.actionStopSlot(2)}>②</button>
            <button onClick={() => props.actionStopSlot(3)}>③</button>
        </div>
    )
}

SlotBox.propTypes = {
    actionStopSlot: PropTypes.func
}

const ScoreBox = (props) => {
    const score_num = [3, 5, 7]
    return (
        <div style={{display: "flex"}}>
            <div>{score_num[props.one]}</div>
            <duv>{score_num[props.two]}</duv>
            <div>{score_num[props.three]}</div>
        </div>
    )
}

ScoreBox.propTypes = {
    one: PropTypes.number,
    two: PropTypes.number,
    three: PropTypes.number
}

const RestartButton = (props) => {
    return (
        <button onClick={() => props.actionRestart()}>Start</button>
    )
}

RestartButton.propTypes = {
    actionRestart: PropTypes.func
}

const ResultBox = (props) => {
    return (
        <p>{props.result_score}</p>
    )
}

ResultBox.propTypes = {
    result_score: PropTypes.number
}

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

以上です。ステートの状態監視の方法が分からなかったので、
startを押したときにslotの値をとりました。