React useState() hook returns undefined when using option chained value as initial count

Question

When I use totalQuantity inside the useState() hook ,it returns undefined. But if I assign totalQuantity = 100, totalQuantity = 200 etc. inside the useState() hook, it displays the number. So why useState(totalQuantity) returns undefined whenever I assign totalQuantity the option chained value as the initial count? Here is the code:

  const inventories = useInventory();
  const { inventoryId } = useParams();
  const selectedInventory = inventories.find(
    (inventory) => inventory._id === inventoryId
  );
  const totalQuantity = selectedInventory?.quantity;
  console.log(totalQuantity);
  const [carQuantity, setCarQuantity] = useState(totalQuantity);
  const quantityDecreaser = () => {
    if (carQuantity > 0) {
      setCarQuantity(carQuantity - 1);
      const remainingQuantity = carQuantity - 1;
      const data = { remainingQuantity };
      fetch(`http://localhost:5000/inventories/${inventoryId}`, {
        method: "PUT",
        headers: {
          "content-type": "application/json",
        },
        body: JSON.stringify(data),
      })
        .then((res) => res.json())
        .then((result) => {
          console.log(result);
        });
    }
  };```

score 0 · Answer 1 · answered Apr 30 '22 at 12:00

0

It seems like your selectedInventory is returning undefined and so is

  const totalQuantity = selectedInventory?.quantity;

This might me caused by a wrong or unexisting inventoryId.

Check if selectedInventory has correct data and you can also use a default value here:

  const [carQuantity, setCarQuantity] = useState(totalQuantity || defaultValue);

answered Apr 30 '22 at 12:00

arthurg

23
4

I think my selectedInventory is returning the value properly as I also wrote console.log(totalQuantity) there to check, and it prints the value successfully on the browser console. But it returns undefined when I use useState(totalQuantity). – FID Apr 30 '22 at 13:34

Hakob Sargsyan · Answer 2 · 2022-04-30T12:30:53.630

0

maybe your find method return undefined therefore state is undefined

const get = (data) => {
        const inventoryId = 8;
        const selectedInventory = data.find(
            inventory => inventory.id === inventoryId
        );
        return selectedInventory;
    }
    const totalQuantity = get([{id: 4,quantity:888 }, {id: 8, quantity:88 }, {id: 9, quantity:787}]);
    const [carQuantity, setCarQuantity] = React.useState(totalQuantity);

    console.log(carQuantity);

edited Apr 30 '22 at 12:30

answered Apr 30 '22 at 12:09

Hakob Sargsyan

1,294
1
9
15

My find method returns an object with the matched inventoryId. I tried console.log(selectedInventory) to check and it successfully prints out the object. But useState(totalQuantity) returns undefined. – FID Apr 30 '22 at 13:41

score 0 · Answer 3 · answered Apr 30 '22 at 14:20

0

it might a be type problem since you're using === to check for equality, if your inventory._id is a number, since useParams hook will return a string.

use the double equal sign to check for value only inventory._id == inventoryId

OR

parse the inventoryId to a number with the plus + like so inventory._id === +inventoryId

answered Apr 30 '22 at 14:20

Ayoub

46
1
2

Oh! I fixed it . I used useEffect(() => { setCarQuantity(totalQuantity); }, [totalQuantity]); and the problem is gone. It displays the quantity now. – FID Apr 30 '22 at 15:39

score 0 · Accepted Answer · answered Apr 30 '22 at 15:48

I fixed it using useEffect(). Maybe the setCarQuantity() was failed to set the value immediately and after using useEffect() it listens to the state change.

const [carQuantity, setCarQuantity] = useState(totalQuantity);
  useEffect(() => {
    setCarQuantity(totalQuantity);
  }, [totalQuantity]);

React useState() hook returns undefined when using option chained value as initial count

4 Answers4

OR