How to access form inputs in react js with nested object

Question

I'm working a react form using the controlled inputs to access the change on the form inputs. It contained lot of fields but i haven't posted all the fields.

import React from 'react';
import Links from './Links.jsx';
import axios from 'axios';
import Dialog from 'react-bootstrap-dialog';
import {Typeahead} from 'react-bootstrap-typeahead';
import Autocomplete from 'react-autocomplete';

import style from './app.css';

class AddNewEmployee extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            firstName : '',
            middleName : ''
        }
        this.handleUserInput = this.handleUserInput.bind(this);
    }

    handleUserInput(){
        const name = e.target.name;
        const value = e.target.value;
        this.setState({
             [name]: value
        })
    }

    render() {
        return(
            <div className = "col-sm-6">
            <input type="text" 
            placeholder="Enter First Name" name="firstName"
            value={this.state.firstName} onChange={(event) => this.handleUserInput(event)}>
            </input>
            </div>
            <div className = "col-sm-6">
            <input type="text" 
            placeholder="Enter First Name" name="middleName"
            value={this.state.middleName} onChange={(event) => this.handleUserInput(event)}>
            </input>
            </div>
        )
    }

}

export default AddNewEmployee;

The above code is working fine so far, but i got a requirement to keep an nested object to save the form input values.

But i'm missing some thing here how to handle the user input on form elements. How shall we handle the user input when we have a nested object.

import React from 'react';
import Links from './Links.jsx';
import axios from 'axios';
import Dialog from 'react-bootstrap-dialog';
import {Typeahead} from 'react-bootstrap-typeahead';
import Autocomplete from 'react-autocomplete';

import style from './app.css';

class AddNewEmployee extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            employee : {
                firstName : '',
                middleName : ''
            }
        }
        this.handleUserInput = this.handleUserInput.bind(this);
    }

    handleUserInput(){
        // here how to handle those input changes
    }

    render() {
        return(
            <div className = "col-sm-6">
            <input type="text" 
            placeholder="Enter First Name" name="firstName"
            value={this.state.employee.firstName} onChange={(event) => this.handleUserInput(event)}>
            </input>
            </div>
            <div className = "col-sm-6">
            <input type="text" 
            placeholder="Enter First Name" name="middleName"
            value={this.state.employee.middleName} onChange={(event) => this.handleUserInput(event)}>
            </input>
            </div>
        )
    }

}

export default AddNewEmployee;

Rick Jolly · Accepted Answer · 2017-11-06 05:10:38Z

1

handleUserInput(e) {
    // Option #1 (mutable data)
    let {employee} = this.state;
    const name = e.target.name;
    const value = e.target.value;
    employee[name] = value;
    this.setState({
      employee
    });

    // Option #2 (immutable data)
    const { employee } = this.state;
    const name = e.target.name;
    const value = e.target.value;
    this.setState({
      employee: {
        ...employee,
        [name] : value
      }
    });
  }

Also, since you are binding handleUserInput in the constructor, you can simplify onChange={(event) => this.handleUserInput(event)} to onChange={this.handleUserInput}

answered Nov 6, 2017 at 5:10

Rick Jolly

3,0192 gold badges27 silver badges32 bronze badges

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

2 Comments

Manikanta B Over a year ago

handleUserInput(e) { // Option #1 (mutable data) let {employee} = this.state;// Is it correct or else do we have to use this.state.employee instead of this.state}

Rick Jolly Over a year ago

let {employee} = this.state is the same as let employee = this.state.employee if that is your question? It's an ES6 feature called "destructuring".

Collectives™ on Stack Overflow

How to access form inputs in react js with nested object

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related