トグルボタンの作成～三項演算子を学ぶ～

下記HPはわかりやすいです。

qiita.com

ToggleTest.js

import {useState} from 'react';

const ToggleTest = ()=>{

    const [open,setOpen] = useState(true);

    const changeOpen = ()=>{

        if(open === true){

            setOpen(false);

        }else{

            setOpen(true);

        }

       

    }

    return(

        <div>

            <button onClick={changeOpen}>{open ? 'START' : 'STOP'}</button>

        </div>

    );

}

export default ToggleTest;

index.js

import React from 'react';

import ReactDOM from 'react-dom/client';

import './index.css';

import ToggleTest from './ToggleTest';

import reportWebVitals from './reportWebVitals';

import { unstable_batchedUpdates } from 'react-dom' // or 'react-native'

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(

  //<React.StrictMode>

    <ToggleTest />

  //</React.StrictMode>

);

// If you want to start measuring performance in your ToggleTest, pass a function

// to log results (for example: reportWebVitals(console.log))

// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

reportWebVitals();