React 18 / Typescript / Functional Component: Prop won't display

Question

At the "I don't get it" stage with a simple problem and need some guidance.

Here's a simple functional component in React 18:

const ResponseDisplay = ({ theData }: any) => {
  {/* This appears in the webdev console, showing the value 'true' */}
  console.log('theData ', theData)

  return (
    <div className='app-container'>
      <div className='app-panel'>
        {/* {theData} just won't render. shows up in console correctly, above */}
        <h2>here is what you sent: {theData}</h2>
      </div>
    </div>
  );
} 

export default ResponseDisplay

The component should display

here is what you sent: true

but it only displays

here is what you sent:

I am without any understanding of why this is happening. Any help is greatly appreciated.

Thanks in advance

Answer 1

Booleans do not get put onto the page. If you want to show the text "true", you'll need to turn it into a string. For example:

<h2>here is what you sent: {"" + theData}</h2>

Or

<h2>here is what you sent: {theData ? "Yes" : "No"}</h2>