勝手に独自のチュートリアルを行う②～ボタンをクリック後に無効にする～

www.delftstack.com

これはそのまま使わせてもらいます。

独自のチュートリアルを作るためのTips

次に押すべきボタンの数字を上に表示し、その数字と同じボタンを押すと、ボタンが無効になるというのをやってみます。

<index.js>

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import MonoButton from './MonoButton';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  //<React.StrictMode>
    <MonoButton />
  //</React.StrictMode>
);

<MonoButton.js>

import ArrangeButton from './ArrangeButton';

const MonoButton = ()=>{
    return(
        <div>
            <ArrangeButton buttonText="5"/>
        </div>

    )
}

export default MonoButton;

<ArrangeButton.js>

import {useState} from 'react';

const ArrangeButton = (props)=>{

    const [numberHolder,setNumberHolder] = useState(5);
    const [disable,setDisable] = useState(false);

    const changeButtonDiable = ()=>{
        if(props.buttonText === numberHolder.toString(10)){
            setDisable(true);
            setNumberHolder(numberHolder-1);
        }else{}
    }

    return(
        <div>
            <p>{numberHolder}</p>
            <button disabled={disable}
                    onClick={changeButtonDiable}>{props.buttonText}</button>
        </div>
    )

}

export default ArrangeButton;

さて、上に表示された数字と同じボタンを押すと、そのボタンは無効になり、上の数字が１減ります。