Languages

React - how to render boolean value?

4 points
Asked by:
Aran-Busby
262

I have an array describing books and wanted to display it, but it doesn't render a boolean value

My code:

const App = () => {
  const bookList = [
    {
      title: 'title1',
      isOpen: true
    },
    {
      title: 'title2',
      isOpen: false
    }
  ]

  return (
    <div>
      {bookList.map(({ title, isOpen }) => {
        return (
          <div>
            <p>{title}</p>
            <span>Is open: {isOpen}</span>
          </div>)
      })}
    </div>
  );
};

export default App;

Output:

title1
Is open:
title2
Is open:

The output I want to get:

title1
Is open: true
title2
Is open: false

how to solve it?

1 answer
4 points
Answered by:
Aran-Busby
262

Try to use String() function.

Example:

// ONLINE-RUNNER:browser;

const App = () => {
  const bookList = [
    { title: 'title1', isOpen: true  },
    { title: 'title2', isOpen: false }
  ]
  return (
    <div>
      {bookList.map(({ title, isOpen }) => {
        return (
          <div key={title}>
            <p>{title}</p>
            <span>Is open: {String(isOpen)}</span>
          </div>)
      })}
    </div>
  );
};

const root = document.querySelector('#root');
ReactDOM.render(<App/>, root);
0 comments Add comment
Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join