How to render a boolean value in JSX in React

This article will give you the answer for how to render a boolean value in JSX in React. Some methods will be mentioned like toString(), JSON.stringify() or String() method.

Render a boolean value in JSX in React

The language boolean is a logical data type in JavaScript or another programming. It has two values ​​, true and false. And Boolean is an object representing the boolean data type. It also includes other properties and methods.

So, will it work if we render the boolean variable directly into JSX?

Code:

import React from 'react';
 
const App = () => {
  const boolean=true;
  return (
    <>
      <h2>How to render a boolean value in JSX in React | LearnShareIT</h2>
      <h3>Boolean Value:{boolean}</h3>
    </>
  );
};
 
export default App;

If you use this method, the program will not get the boolean value to the screen by using JSX, see the next part of the article to get the answer.

Using JSON.stringtify() method

JSON.stringify() is a classic function in Javascript to convert an Object to JSON, so it can convert any data type to JSON and can be used in JSX.

Code:

import React from 'react';
 
const App = () => {
  const boolean=true;
  return (
    <>
      <h2>How to render a boolean value in JSX in React | LearnShareIT</h2>
      <hr/>
      <h3>Boolean Value : {JSON.stringify(boolean)}</h3>
    </>
  );
};
 
export default App;

Output:

The boolean variable is a boolean value that equals true when you use JSON.stringtify(), we can render it to the screen.

Using String() method

In this way, we use the String() method in Javascript to force the data type of the boolean variable to String and can be rendered to the screen.

Code:

import React from 'react';
 
const App = () => {
  const boolean=true;
  return (
    <>
      <h2>How to render a boolean value in JSX in React | LearnShareIT</h2>
      <hr/>
      <h3>Boolean Value : {String(boolean)}</h3>
    </>
  );
};
 
export default App;

The result of this method is a string “true” so it can be rendered using JSX. You can also follow this last way.

Using toString() method

This is the method used to convert an object to a string and return it. The toString() method belongs to the Object class in Java and can be used without importing any libraries.

Code:

import React from 'react';
 
const App = () => {
  const boolean=true;
  return (
    <>
      <h2>How to render a boolean value in JSX in React | LearnShareIT</h2>
      <hr/>
      <h3>Boolean Value : {boolean.toString()}</h3>
    </>
  );
};
 
export default App;

The return result of this method is similar to the String() method. Hope these methods will help you.

Summary

The article has shown you three ways to answer the question of how to render a boolean value in JSX in React. The methods all give the same result. However, I recommend using the JSON.stringtify() method because it’s cross-browser-supported and can render with any JSX.

Maybe you are interested:

• Concatenate JSX elements into an Array in React
• How to toggle a Boolean state in React

Nathaniel Kirk

Hi, my name’s Nathaniel Kirk. I’m interested in learning and sharing knowledge about programming languages. My strengths are C, C++, Python, HTML, CSS, Javascript, and Reactjs. If you have difficulty with them, don’t worry. I’m here to support you.

---

Name of the university: PTIT
Major: IT
Programming Languages: C, C++, Python, HTML, CSS, Javascript, Reactjs