There is a button on the notes page with a deactivation function, there is a note object (todo) it has an is_active property with a value of False or True , this property changes when clicked please tell me how to make it so that when the button is pressed, the inscription changes along with the value: "Open" : "Closed", how and where to write the condition correctly. I found an option, but for some reason it does not work. Here is my note code:

const TodoItem = ({todo, deleteTODO}) => {
    // <div>if todo.is_active === 'True' ? button:'Open' : button:'Closed'</div>
    return (
        <tr>
            <td>{todo.id}</td>
            <td>{todo.name_project}</td>
            <td>{todo.text}</td>
            <td>{todo.date_create}</td>
            <td>{todo.date_update}</td>
            <td>{todo.creator}</td>
            {/*<td>{todo.is_active}</td>*/}
            <td>
                {todo.is_active === 'True' ?
                <button onClick={() => deleteTODO(todo.id)}  type='button'>Open </button>:
                <button onClick={() => deleteTODO(todo.id)}  type='button'>Closed </button>}
            </td>
        </tr>
    )
}