State variables not getting rendered

Question

I am new to Reactjs and trying to do some simple stuff. In the below code snippet I have declared two state variable counter and setCounter to 9 but when I am rendering both of them in the UI {setCounter} is not getting rendered whereas I am able to see 9 in the UI which is the {counter}

import * as React from 'react';
const {useState} = React;
export default function App()
{
  const [counter, setCounter] = useState(9); // Declaring State variables 
  return (
    <>
      <p>{counter}</p>
      <p>{setCounter}</p>
    </>
  )
}

Please suggest where I am doing wrong.

@lissettdm how is it a function? isn't that an array of two variables? — Mahesh
– Mahesh, Commented Dec 17, 2020 at 16:53

user13610500 · Accepted Answer · 2020-12-17 17:09:43Z

1

setCounter is a function. Let me explain how this works. I drafted up a function based on the example you provided.

import React, { useState } from 'react';
export default function App() {
  const [counter, setCounter] = useState(9); // Declaring State variables 

  const addOne = () => {
    if (counter === 9) {
      setCounter(counter + 1)
    };
  }
  return (
    <>
      <button onClick={() => { addOne() }}></button>
      <p>{counter}</p>
    </>
  )
}

I created a function where I take the 9 that you assigned and set the counter to that value, and increment by one. Then in the return, I created a button. When clicked, the button will call the addOne function and setCounter to increment by one. I hope this illustrates the difference here and why you won't be able to simply render setCounter.

answered Dec 17, 2020 at 17:09

user13610500

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

2 Comments

Mahesh Over a year ago

very nice explaination. but what is the difference between function addOne() { setCounter(counter + 1) } and const addOne = () => { setCounter(counter + 1) } when they are doing the same job. Which one is more preferable?

user13610500 Over a year ago

No problem - I illustrated that way to be more explicit. You can certainly just do it as you suggested. I didn't include a condition in this one to save some space. You can click the button and it will keep incrementing the counter. But I hope it illustrates the utility the same way as the previous example.

import React, {useState} from 'react'; export default function App() {   const [counter, setCounter] = useState(9); // Declaring State variables     return (     <>       <button onClick={() => {setCounter(counter + 1)}}></button>       <p>{counter}</p>     </>   ) }

user11909341 · Accepted Answer · 2020-12-17 17:16:59Z

1

Hey friend I recommend you to see the React documentation, since it is just starting, check it out on the subject of states. As for what you are doing, the first thing setCounter is not a variable, it's a function that changes the value to the variable counter, counter is a variable that you can call in any part of your component or you can even send through the props to other components. Hopefully you have served this little help, but it is never too late to start with the time you will dominate friend. Thank you very much.

Documentation link: https://reactjs.org/docs/hooks-state.html

answered Dec 17, 2020 at 17:16

user11909341

Collectives™ on Stack Overflow

State variables not getting rendered

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related