I am an absolute beginner with React, I have a component where I need to render the value of a state to the Dom but it doesnt work let me show you my code.
Links.jsx
import React, { useEffect, useState } from 'react'
import { Collapse } from 'antd'
const Links = () => {
const [isMobile, setIsMobile] = useState(false)
return (
<div>
<div>asd2</div>
<div>{ isMobile }</div>
<div>asd5</div>
</div>
)
}
export default Links
I am using it like
footer.jsx
import Links from './links'
const Footer = ({
globalData,
user
}) => {
return(
<Links/>
)
}
it does render the text asd2 and asd5 meaning the component itself works just not the state value. I've looked everywhere this is how everybody does it .What am I doing wrong?
Instead
<div>{ isMobile }</div>
Try this
<div>{ isMobile.toString()}</div>
Or this
<div>{ isMobile ? "true" : "false"}</div>
Even this:
<div>{`${isMobile}`}</div>
Type boolean cannot be rendered in JSX.
You need to convert isMobile it to a string. false, null & undefined these values are not rendered.
You can't render a Boolean. Use it like this:
{ isMobile.toString() }