Add an item to array - reactjs hooks

Question

I am trying to add an item to the array. That array was fetched using an API.

but when I click to add the item, it's not updating.

here is my onChange code

  const changeHandler = e => {
    e.preventDefault();
    const textName = e.target.value;
    setText(textName);
  };

here is my add to array code

  const addNewHandler = e => {
    e.preventDefault();
    const addNewname = {
      id: Math.random().toString(),
      name: text
    };

    console.log(addNewname);
    const apiupdate = [...api];
    // apiupdate.concat(addNewname);
    // console.log(apiupdate);
    setApi(apiupdate.concat(addNewname));
    console.log(api);
  };

here is where I call that function

<TextField
  variant="outlined"
  value={api.Name}
  name="Name"
  onChange={changeHandler}
/>
<Button
  variant="outlined"
  color="primary"
  style={{ margin: "10px" }}
  onClick={addNewHandler}
>
  Add Me
</Button>

https://codesandbox.io/s/suspicious-hooks-swvn0...

Please use this in your local network issue with fetch when using in the sandbox

In case, if you need the whole code here it is. pastebin.com/uG6XcGzY — Logesh P
– Logesh P, Commented Mar 1, 2020 at 7:34
Is the issue that console.log(api) shows the old version (unupdated) of api, or does api actually not update when rendered? — Henry
– Henry, Commented Mar 1, 2020 at 7:34
It shows old version.. Then I tried something, it showed new version, but again not rendering — Logesh P
– Logesh P, Commented Mar 1, 2020 at 8:26

Fred · Accepted Answer · 2020-03-01 09:30:09Z

1

Change your code like this:

const addNewHandler = e => {
    e.preventDefault();
    const addNewname = {
       id: Math.random().toString(),
       nutritionalInformation: {
         calories: 0,
         fat: 0,
         saturatedFat: 0,
         sugars: 0,
         salt: 0
      },
      name: text
    };

    console.log(addNewname);
    const apiupdate = [...api, addNewname];
    // apiupdate.concat(addNewname);
    // console.log(apiupdate);
    setApi(apiupdate);
    console.log(api);
};

[...api, addNewname] add addNewname to end of api array and make a new array.

Also, I set nutritionalInformation when adding new item.

edited Mar 1, 2020 at 9:30

answered Mar 1, 2020 at 8:54

Fred

3,4714 gold badges38 silver badges59 bronze badges

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

5 Comments

Logesh P Over a year ago

Please do refer my full coding. There may be some other things i might have missed

Fred Over a year ago

@LogeshP There are some errors in other parts of your code, I changed my answer and check it. you use `nutritionalInformation' but you never set it.

Fred Over a year ago

I changed my answer. Please check it. @LogeshP

Logesh P Over a year ago

your code works fine.. but cant we do this without that nutritional information ?

Fred Over a year ago

@LogeshP Yes, you can, You should use guard operator before using it in TableCell like this:

<TableCell align="justify">                   {row.nutritionalInformation && row.nutritionalInformation.calories}                 </TableCell>

Collectives™ on Stack Overflow

Add an item to array - reactjs hooks

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related