I am trying to write a start/close btn by clicking the btn. The btn should be rendered based on the state change. I use startFlag
to change the btn, since the startFlag
will store into the hooks, so that if I changed to other page, the startFlag
would set to its original value. However, I found that this method won't render the component immediately. It renders if I refresh the page. For example: if I clicked startBtn
, in the main
I have set the startFlag
to true
. However, the closeBtn
won't show unless if I refresh. Is there any problem with my implementation?
import React, {useContext, useEffect, useState} from 'react'
import { mainContext } from '../../Main'
import Startbtn from './Startbtn'
import Stopbtn from './Stopbtn'
export default function SingleTaskControlbtn({startFlag, uuid}) {
const [switchToStop, setSwitchToStop] = useState(false);
const {
handleStart,
handleStop,
} = useContext(mainContext)
useEffect(()=>{
setSwitchToStop(startFlag)
}, [startFlag])
return (
<div>
<div
className="btn-first-pos"
onClick={()=>{
handleStart(uuid)
}}
>
<Startbtn/>
</div>
{
switchToStop
&&
<div
className="btn-first-pos"
onClick={()=>{
handleStop(uuid)
}}
>
<Stopbtn/>
</div>
}
</div>
)
}