'How Do I Output Boolean Variables to Screen in ReactJS Typescript?

I want to show the value of a boolean variable on screen in my ReactJS app. Here is my code:

const MyComponent = (props) => {

  let x = false;
  
  return (<div>
    <div>
      <p>Hello {props.value} Bye {x} Done</p>
    </div></div>
  );
};

export default MyComponent;

The screen should show Hello true Bye false Done.

However, I don't see any boolean values, only Hello Bye Done. Why is this? How can I output the booleans to the screen? If I use a number instead of a boolean, it shows up fine.

reactjs typescript

Solution 1:^[1]

Try making those values as string

{`${value}`}
or 
{value.toString()}

Solution 2:^[2]

Even though you wrap the variable in {}, you still need to add .toString() to it to get it to render. Thus the correct line is:

<p>Hello {props.value.toString()} Bye {x.toString()} Done</p>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Raju Bera
Solution 2	Elliptica

'How Do I Output Boolean Variables to Screen in ReactJS Typescript?

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]