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

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

CodePudding user response：

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>

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