React: Adding an object to an array in state through input fields

Question

So, I want to read two text field values and use a button to reset my state. Here's my code:

this.state = {

  items: [{
    name: 'Cola',
    price: 1.20
  }, {
    name: 'Stuff',
    price: 0.50
  }, {
    name: 'Beer',
    price: 0
  }
]
};


handle = (name, price) => {
    this.addProductToBasket(name, price);
  }

addProductToBasket = (name, price) => {

    var newArray = this.state.items.slice();

    var itemToBeAdded = {
      name : name,
      price : price
    }; 

    newArray.push(itemToBeAdded);
    console.log(newArray)

    this.setState( {items:newArray} )

}


<form onSubmit={ () => this.handle(this.state.items.name, this.state.items.price)}>
  <input type="text" name='name' value={this.state.items.name}/>
  <input type="text" name='price' value={this.state.items.price}/>
  <button type="submit" value="Submit">BUTTON</button>
</form>

I tested

addProductToBasket

and it works! I debugged the code in Chrome and I just get undefined for name and price.

can you put a console log inside handle function to check whether the price and name values are coming ? — Viraj Amarasinghe - Resiliz
– Viraj Amarasinghe - Resiliz, Commented Feb 7, 2018 at 12:56
Sorry. I meant this.state.items.name and this.state.items.price. EDIT: I changed this.state.name and this.state.price to this.state.items.name and this.state.items.price. — Claim
– Claim, Commented Feb 7, 2018 at 12:59

Andy · Accepted Answer · 2018-02-07 13:11:45Z

2

First change your state to include name and price:

this.state = {
  name: '',
  price: '',
  items: [...]
}

You want to add a new function that handles changes in your input fields. Call it handleInput. It takes the event, grabs the name of the input, and sets the appropriate state value of that key.

handleInput(e) {
  let { name, value } = e.target;
  if (name === 'price') value = +value;
  this.setState({ [name]: value });
}

Here's the corresponding JSX:

 <input type="text" name="name" onChange={this.handleInput} value={this.state.name} />
 <input type="text" name="price" onChange={this.handleInput} value={this.state.price} />

And here's a working demo. Look at the console for the changes to this.state.

answered Feb 7, 2018 at 13:11

Andy

63.6k13 gold badges72 silver badges99 bronze badges

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

4 Comments

Claim Over a year ago

Hey! Thanks, the values are not undefined anymore. Could you explain me this syntax though this.setState({ [name]: value }); The page is refreshing every time I add something new to the list.

Claim Over a year ago

Okay nevermind, I could just add e.preventDefault(); to stop it from refreshing.

Andy Over a year ago

Yes. It uses the value of name (the name of your input element) as the key when it sets the new state. If you don't use the square notation it will just set this.state.name instead.

Claim Over a year ago

Oh okay, now I get it. I was also confused about handleInput(e) since I thought it handles both inputs but then it hit me. Gonna look at something else than form since, e.preventDefault() did not work.

sketchedin · Accepted Answer · 2018-02-07 13:09:51Z

0

The parameters passed to the handle function are incorrect. They are currently referring to the array of items in state, but it should be referring to the input field values.

Create something like this.state.input.name and this.state.input.price. These would have to be set by text field onChange handlers.

answered Feb 7, 2018 at 13:09

sketchedin

2621 gold badge3 silver badges10 bronze badges

Comments

A.K.47 · Accepted Answer · 2018-02-08 10:31:46Z

As @sketchedin pointed out, the parameters passed are not the value entered by user itself but instead are bound to the state object.

In order to pass the parameters you either have to call an onChange() function but instead if you want to call it from the handle function of form you should make sure that you capture the current input values(i.e. the params passed should be bound to the input and not the state object).

handleSubmit(event) {
  event.preventDefault();
  const form = event.target;
  const data = new FormData(form);

  const name = form.elements[name];
  const price = form.elements[price];

  this.addProductToBasket(name, price);
}

What we are doing in the above lines is that we are using DOM api's form element and fetching the correct input values instead of using REACT to manipulate the forms.

Collectives™ on Stack Overflow

React: Adding an object to an array in state through input fields

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related