ReactJS How to change JSON.stringify value?

Question

I Used the following code to append my json structured values to a state variable:

var value = JSON.stringify({"id":event.target.name,"amount":event.target.value})

this.setState({temp:[...this.state.temp, value]},function () {
    console.log(this.state.temp);
});

And i got the result as:

["{"id":"1","amount":"10"}","{"id":"2","amount":"20"}"]

How can i get it restructured as following:

[{"id":"1","amount":"10"},{"id":"2","amount":"20"}]

Update: When i removed JSON.stringify like this var value = {"id":event.target.name,"amount":event.target.value} i got null array as result

Remove JSON.stringify(...)

Weedoze
– Weedoze

2018-02-21 12:37:17 +00:00
Commented Feb 21, 2018 at 12:37 — Weedoze
– Weedoze, Commented Feb 21, 2018 at 12:37
Don't stringify the JS object

Adarsh
– Adarsh

2018-02-21 14:21:09 +00:00
Commented Feb 21, 2018 at 14:21 — Adarsh
– Adarsh, Commented Feb 21, 2018 at 14:21

Mayank Shukla · Accepted Answer · 2018-02-21 12:43:44Z

2

That is because you are using stringify on value (object), that will return a string, then you are pushing that string into state array.

Avoid stringify and directly push that object.

Like this:

var value = {"id": event.target.name, "amount": event.target.value};

this.setState(
    prevState => ({ temp: [...prevState.temp, value] }), 
    () => { console.log(this.state.temp);}
);

Suggestion:

Use updater function instead of using this.state inside setState method.

edited Feb 21, 2018 at 12:43

answered Feb 21, 2018 at 12:38

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

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

7 Comments

Hareesh Over a year ago

@Mayank This gives a null array as result

Mayank Shukla Over a year ago

what is the initial value of temp? also you are using same value as i pasted in the snippet?

Hareesh Over a year ago

Initial value of temp is null

Mayank Shukla Over a year ago

it should be [], as per my knowledge it should throw error if the initial value is null, check console are you getting any error?

Hareesh Over a year ago

I have given as temp: [] in my state initialisation and not null. I just meant null array as []

|

Javed Shaikh · Accepted Answer · 2018-02-21 12:38:19Z

0

Try this one, no need to use JSON.stringify

var value = {"id":event.target.name,"amount":event.target.value}
    this.setState({temp:[...this.state.temp, value]},function () {
         console.log(this.state.temp);
    });

answered Feb 21, 2018 at 12:38

Javed Shaikh

6817 silver badges16 bronze badges

2 Comments

Hareesh Over a year ago

This gives a null array as result

Javed Shaikh Over a year ago

plz change temp = [] as @mayank suggest. that was the issue.

Andy · Accepted Answer · 2018-02-21 12:44:23Z

0

JSON.stringify creates a string from JS object. That is why all object is surrounded by quotes within an array.

Try this.

var value = {"id":event.target.name,"amount":event.target.value};

this.setState({temp:[...this.state.temp, value]},function () {
  console.log(this.state.temp);
});

edited Feb 21, 2018 at 12:44

Andy

63.6k13 gold badges72 silver badges99 bronze badges

answered Feb 21, 2018 at 12:42

Colin

1741 silver badge10 bronze badges

Comments

jilykate · Accepted Answer · 2018-02-21 13:00:13Z

0

Option 1: remove the

var value = JSON.stringify({"id":event.target.name,"amount":event.target.value});

Option2: use:

JSON.parse(value);

answered Feb 21, 2018 at 13:00

jilykate

6,0382 gold badges20 silver badges27 bronze badges

Collectives™ on Stack Overflow

ReactJS How to change JSON.stringify value?

4 Answers 4

7 Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related