React updating state in two input fields from form submission

Question

I am trying to make a simple contact form using React. Eventually I will send the data collected from the state to a database, but for right now I am trying to just get it to console log the correct values.

Right now, the email field overrides the name field and when I console log both states, name shows up and email is undefined. Here is my React Component

import React, { Component, PropTypes } from 'react';
import ContactData from '../data/ContactData.js';


class FormContact extends Component {
    constructor(props) {
        super(props)
        this.state = {
            name: '',
            email: '',
            textArea: ''
        }
    }

    handleChange(event) {
        event.preventDefault();
        this.setState({
            name: event.target.value,
            email: event.target.email
        })
    }

    handleSubmit(event) {
        event.preventDefault();
        console.log(this.state.name + ' ' + this.state.email);
    }

    render() {
        return (
            <form onSubmit={this.handleSubmit.bind(this)}>
                <label> Name:
                    <input type="text" placeholder="Name" value={this.state.name} onChange={this.handleChange.bind(this)} />
                </label><br />
                <label> Email:
                    <input type="text" placeholder="Email" value={this.state.email} onChange={this.handleChange.bind(this)}/>
                </label><br />
                    <input className="btn btn-primary" type="submit" value="Submit" />
           </form>
        )
    }
}

FormContact.PropTypes = {
    subName: PropTypes.string,
    subEmail: PropTypes.string
}

FormContact.defaultProps = {
    subName: 'Sam',
    subEmail: ''
}

class Contact extends Component {
    render() {
        return (
            <div>
                <h1>CONTACT PAGE</h1>
                <FormContact />
            </div>
        )
    }
}


export default Contact;

Boky · Accepted Answer · 2018-03-16 06:50:42Z

19

If I understand what you want, you could do it as follows :

Add an empty object in your state for the form values

formValues: {}
Add the name attribute to your fields

<input name="name" .... /> <input name="email" .... />

then depending on that name update your state in handleChange function

let formValues = this.state.formValues;
let name = event.target.name; // Field name
let value = event.target.value; // Field value

formValues[name] = value;

this.setState({formValues})

And if the values go one level deeper, you could use value={this.state.formValues["name"]} instead of value={this.state.name} - where name is the value of the name attribute of your input field

Thus, everything together should be as follows :

class Test extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            formValues: {}
        }
    }

    handleChange(event) {
        event.preventDefault();
        let formValues = this.state.formValues;
        let name = event.target.name;
        let value = event.target.value;

        formValues[name] = value;

        this.setState({formValues})
    }

    handleSubmit(event) {
        event.preventDefault();
        console.log(this.state.formValues);
    }

        render(){
        return (
        <form onSubmit={this.handleSubmit.bind(this)}>
                <label> Name:
                    <input type="text" name="name" placeholder="Name" value={this.state.formValues["name"]} onChange={this.handleChange.bind(this)} />
                </label><br />
                <label> Email:
                    <input type="text" name="email" placeholder="Email" value={this.state.formValues["email"]} onChange={this.handleChange.bind(this)}/>
                </label><br />
                    <input className="btn btn-primary" type="submit" value="Submit" />
           </form>
      )
    }
}

React.render(<Test />, document.getElementById('container'));

Here is fiddle.

Hope this helps.

edited Mar 16, 2018 at 6:50

answered Dec 8, 2016 at 8:42

Boky

12.1k31 gold badges104 silver badges173 bronze badges

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

5 Comments

user3622460 Over a year ago

I'll set this up after work - looks like what I was looking for, thank you!

user3622460 Over a year ago

FormContact is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. - - Produces this error

Joan Mira Over a year ago

To fix the uncontrolled input issue, you have to initialise the formValues object with empty strings for name and email.

unflores Over a year ago

@boky your fiddle is busted when I click on it.

Boky Over a year ago

@unflores Updated.

Pineda · Accepted Answer · 2016-12-08 01:40:13Z

1

The reference to event.target.email does not exist on the event element. The value of a text input from an inline-event handler would be event.target.value for both email and name. The quick solution is to create a separate handler for each input:

handleChangeName(event) { 
  event.preventDefault();
  this.setState({ name: event.target.value });  //<-- both use the same reference
}                                               //    to get the contextual value
handleChangeEmail(event) {                      //    from the inputs v
  event.preventDefault();                       //                    |
  this.setState({ email: event.target.value }); //<--------------------
}

edited Dec 8, 2016 at 1:40

answered Dec 8, 2016 at 1:10

Pineda

7,5933 gold badges34 silver badges47 bronze badges

2 Comments

user3622460 Over a year ago

Yeah I know two different handlers will work, but I feel like there has to be a way to handle it all at once otherwise bigger form submissions would have a TON of handler functions. There must be a better way (not using refs, because I heard those were bad)

Pineda Over a year ago

I see. In that case, have you tried passing an extra parameter to bind: which be the string name of the value you want to change? Then the handleChange method could use that value in the setState dynamically. Another option would be to create a Higher Order Component that wraps an input and effectively makes it a 'dumb' controlled input.

Collectives™ on Stack Overflow

React updating state in two input fields from form submission

2 Answers 2

5 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related