How to use function return value as a state in React?

Question

I am learning functional components with React and I have a simple code, which returns 'Nah' when the state value is 0.

The problem is that this doesn't work during render. Why is that?

import React, { useState } from "react";
import { Button } from "react-bootstrap";
const Counter = () => {
  const [count, setCount] = useState(0);
  const formatCount = () => {
    count === 0 ? setCount("Nah") : setCount(0);
  };

  // let classes = "badge m-2";
  // classes += (this.state.count === 0) ? "badge-warning" : "badge-primary";

  return (
    <div>
      <Button className="badge badge-warning m-2">-</Button>
      {this.formatCount()}
      <button>+</button>
    </div>
  );
};

export default Counter;

i am also new to react but anyway. your `count` is initially 0. now if you render your html tags ( well witch are actually JSX) you execute your function because of the parenthesis at the end `()`. your function checks now if count is `0` and it is true. now `setCount()` changes your count variable to `nah` — bill.gates, Jul 09 '20 at 08:15

score 0 · Answer 1 · answered Jul 09 '20 at 08:15

0

I think your code should deal with numbers not strings.

answered Jul 09 '20 at 08:15

Pius T.K

351
5
9

Noo.. because I changed the state as '0', it also not working.. – jenny Jul 09 '20 at 08:18

ezio4df · Answer 2 · 2020-07-09T08:25:33.250

0

Problems,

1:

{this.formatCount()}

You are in functional component not class, So no need of this

2: (main)

count === 0 ? setCount("Nah") : setCount(0);

It Has recursion,
First count is 0 which triggers setCount("Nah")
Then, in the second render, count is not 0 which triggers setCount(0)

And this loop breaks the app

FIX

use something like this,

const formatCount = () => {
    return count === 0 ? 'Nah' : count
}

edited Jul 09 '20 at 08:25

answered Jul 09 '20 at 08:19

ezio4df

3,541
6
16
31

and what does `useEffect` do? i thought its used to track if some variable made any changes to execute an function depending on it – bill.gates Jul 09 '20 at 08:23
@jenny added that checkout now – ezio4df Jul 09 '20 at 08:25
@Ifaruki WHAAAT !! where did you find `useEffect` in the question ?? – ezio4df Jul 09 '20 at 08:26
@aXuser264 its not in the question i just asking it. – bill.gates Jul 09 '20 at 08:27

score -1 · Accepted Answer · answered Jul 09 '20 at 08:30

There's a couple of things in your code that could be done differently.

First of, your function formatCount() doesn't return a value. So there's pretty much nothing to show when executing it.

Second, your function is executed before the state updates the value, causing it to always stay 0.

A better way to do this would be:

import React, { useState, useEffect } from "react";
import { Button } from "react-bootstrap";
const Counter = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
      formatCount();
  }, []);

  const formatCount = () => {
    count === 0 ? setCount("Nah") : setCount(0);
  };

  // let classes = "badge m-2";
  // classes += (this.state.count === 0) ? "badge-warning" : "badge-primary";

  return (
    <div>
      <Button className="badge badge-warning m-2">-</Button>
      {count}
      <button>+</button>
    </div>
  );
};

export default Counter;

This causes the count to be updated at render and automatically re-rendered to the screen on change.

More info about the useEffect() hook can be found here

Hi Chris thanks for your help! but why the formatCount does not return value...?? I thought arrow function returns value with out return.... isnt it? — jenny, Jul 09 '20 at 08:38
@jenny That's true, but the `setCount()` doesn't return a value. The only way to retrieve the value would be to return `count` or use it in the JSX render — Chris, Jul 09 '20 at 08:46
@jenny Keep in mind that arrow function only returns the value if you don't open brackets, if you do open the brackets arrow function does not return without explicitly calling return. — ATheCoder, Jul 09 '20 at 08:57

How to use function return value as a state in React?

3 Answers3

1:

2: (main)

FIX