Change button caption by condition React jsx-CodePudding

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>
    )
}

CodePudding user response：

I'm assuming that you want to change the text of button based on the boolean value of is_active then this would work.

<td>
  <button onClick={() => deleteTODO(todo.id)}>
    { todo.is_active ? "Open" : "Close" } 
  </button>
</td>