A side question to my earlier question: ternary operator

Question

I want to ask you a quick question as a followup to my earlier question: React - syntax confusion to clarify

code for TodoItem:

import React from 'react'


export const TodoItem = (props) => {

    console.log(props)
    console.log(props.todo.completed)


    return (
        <div className="todo-item">
            <input type="checkbox" checked={props.todo.completed} />
            <p>{props.todo.text} </p>
            <p>Completed: {props.todo.completed} ? 'Yes' : 'No' </p>
            
        </div>
    )
}

export default TodoItem;

last field in props is 'props.todo.completed' thats a boolean. I am trying to decode it to yes/no based on if its true or false, but I cant seem to get the syntax right :( I tried enclosing in backticks, {} but nothing seems to work .. when i code :

Completed: {props.todo.completed} ? 'Yes' : 'No'

shows up: Completed: ? 'Yes' : 'No' when i code:

Completed: {props.todo.completed} ? 'Yes' : 'No'

(adding backticks) backticks show up: Completed: ? 'Yes' : 'No' when i code:

Completed:{ {props.todo.completed} ? 'Yes' : 'No'}

shows up: Completed:{props.todo.completed} ? 'Yes' : 'No'

As you can see, i am struggling to get some basic concepts right in my head, and need your help.

Answer 1

Hi you can write it like this

return (
        <div className="todo-item">
            <input type="checkbox" checked={props.todo.completed} />
            <p>{props.todo.text} </p>
            <p>Completed: {props.todo.completed ? 'Yes' : 'No'}</p>
            
        </div>
    )

Answer 2

To clarify, you use the {} in React when you want to write JavaScript instead of a String in the JSX. In that case:

<p>Completed: {props.todo.completed} ? 'Yes' : 'No' </p>

means that everything outside the {} will be considered strings, so it will render:

Completed (value of props.todo.completed) ? 'Yes' : 'No'

Since the whole operation props.todo.completed ? 'Yes': 'No' is JavaScript, you should put all of it inside the {}, like this:

<p>Completed: {props.todo.completed ? 'Yes' : 'No'}</p>

This will render as:

Completed: (Yes or No, depending on the value of props.todo.completed)

Answer 3

Any javascript expression you want to evaluate in JSX have to be wrapped inside the curly braces{}.

In your case, you want to evaluate a ternary expression so the whole expression has to wrapped inside the curly braces. For example,

<p>Completed: { props.todo.completed ? 'Yes' : 'No' }</p>

Answer 4

When writing JSX, anything inside {} will be interpreted so in your example, you have {props.todo.completed} which interprets as true. The issue is that the ternary operation is outside of the curly braces, so it's never interpreted.

// ? not interpreting ternary operation 
{props.todo.completed} ? 'Yes' : 'No'

// ? interpreting ternary operation 
{props.todo.completed ? 'Yes' : 'No'}

In the second one, you are saying if props.todo.completed is true, return Yes string otherwise No.