useState value not rendering in DOM

Question

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?

Answer 1

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.

Answer 2

You need to convert isMobile it to a string. false, null & undefined these values are not rendered.

Answer 3

You can't render a Boolean. Use it like this:

{ isMobile.toString() }

Answer 4

You can't render a Boolean value. Use it like this: { isMobile.toString() }