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

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.

CodePudding user response：

Try making those values as string

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

CodePudding user response：

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>