CODEWITHSUNDEEP
javascriptreactjs
Dylan T
Dylan T

Reputation: 139

Unable to type into my second field on a React form. Why could this be happening?

I am somewhat new to react, and I am having trouble recognizing whats causing my form to be broken. The submit button works fine and the name adds fine, but i cannot type into my price text-field for some reason. when adding items to the list, the dollar sign for price is adding, but i cant type anything into the price field. 

import React, { Component } from 'react';

class ItemForm extends Component {
  state = { name: '', price: ''}

  handleChange = (e) => {
    const { name, value } = e.target
    this.setState({ [name]: value })
  }

  handleSubmit = (e) => {
    //stop page from reloading
    e.preventDefault();
    //add item to groceries array
    const { addItem } = this.props
    addItem(this.state.name, this.state.price)
    // this.props.addItem(this.state.price)
    //clear form on submit
    this.setState({name: '', price: ''})
  }


  render() {
    return (
      <form onSubmit={this.handleSubmit}>
         <input 
        required 
        placeholder='add Grocery Item' 
        name="name" 
        value={this.state.name}
        onChange={this.handleChange}
        />
        <br />
         <input  
        placeholder='add price (optional)' 
        name="price" 
        value={this.state.price}
        onChange={this.handleChange}
        />
        <br />
        <input class = "btn btn-primary" type = "submit" value = 
  "Add" />
      </form>
    )
  }
}

export default ItemForm;

Upvotes: 0

Views: 31

Answers (1)

FunkeyFlo
FunkeyFlo

Reputation: 295

I think you accidentally put price="price" instead of name="price"

Upvotes: 1

Related Questions