• Home
  • Jobs
  • Courses
  • Questions
  • Teachers
  • For business
  • ES/EN

0

48
Views
useState value not rendering in DOM

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?

about 1 month ago ·

Juan Pablo Isaza

3 answers
Answer question

0

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.

about 1 month ago · Juan Pablo Isaza Report

0

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

about 1 month ago · Juan Pablo Isaza Report

0

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

{ isMobile.toString() }
about 1 month ago · Juan Pablo Isaza Report
Answer question
Find remote jobs
Loading

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post job Plans Our process Sales
Legal
Terms and conditions Privacy policy
© 2022 PeakU Inc. All Rights Reserved.