I have a list of buttons that change a state, a string (used to decide if a modal is displayed ans as the title for this modal). What should happen :

• 1. if the modal is not displayed, clicking on any of these buttons should change open the modal and set its title.
• 2. if the modal is displayed and the same button that opened it is clicked again, the modal should close (title cleared).
• 3. if the modal is displayed and another button is clicked, the modal should stay but its title should change (title changed).

Points 1 and 3 work fine. But 2 is not. So I decided to put some console.logs in there. If I log inside a useEffect linked to my state : title state changes on each button click that should change it but it's never cleared.

So I logged inside the handler function (triggered when a button is clicked) :

• title state always appears as an empty string, even if there's a title inside the modal.

So there it is, it doesn't make any sense to me. Here's parts of my code if it helps :

  const [logsModalTitle, setLogsModalTitle] = useState("");
...
  const handlingLogs = (inputClause) => {
    console.log("handling logs : ", showLogsModal, logsModalTitle);
    if (`${inputClause.name}(${inputClause.label})` === logsModalTitle) {
      setLogsModalTitle("");
    } else {
      setLogsModalTitle(`${inputClause.name}(${inputClause.label})`);
    }
  };
...
  <MyCustomButton
                buttonInnerText="ERROR"
                buttonSize="medium"
                buttonActionFunctionOne={handlingLogs}
                buttonActionPropOne={input.clauses[i]}
              />
...
  useEffect(() => {
    console.log(logsModalTitle);
  }, [logsModalTitle]);

Any idea on what is causing this problem ?