Bouton.tsx

import style from "./Bouton.module.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={style.btnContainer}>
            <button className={style.btn} onClick={changeStatus}>
                Chatière {locked ? "fermée 🔴" : "ouverte 🟢"}
            </button>
        </div>
    )
}

export default Bouton