Bouton.tsx

import './Bouton.css'
import {useEffect, useState} from "react";
import {toast} from "react-toastify";

function Bouton({statusLocked, sendMessage} : any) {

    const [loading, setLoading] = useState(false)
    const [locked, setLocked] = useState(statusLocked)

    useEffect(() => {
        setLocked(statusLocked)
    }, [statusLocked])

    function changeStatus() {
        const message = locked ? 'unlock' : 'lock'
        sendMessage(message)
    }

    return(
        <div className="btn">
            <button onClick={changeStatus}>
                Chatière {locked ? "fermée" : "ouverte"}
            </button>
        </div>
    )
}

export default Bouton