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

Nicholas Tower · Accepted Answer · 2022-09-28 04:40:47Z

2

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>

answered Sep 28, 2022 at 4:40

Nicholas Tower

87k10 gold badges115 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related