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>
Or
<h2>here is what you sent: {theData ? "Yes" : "No"}</h2>