update values in react form input fields

Question

I am new to react and I can fetch the result from form input fields. Now I need to update those values and submit to the backend. I am struggling to find a way to pass all the input field values at once.

constructor(props) {
    super(props);
    this.state = {
        items: [],
        isLoaded: false,
        data: this.props.location.data
    };
}

render() {
    return (
        <div>
            <h2>Update Your Profile</h2>
            {items.map(item => (
                <Form key={item.uId} onSubmit={this.handleSubmit}>
                        <label>User Name</label>
                        <input type="text" defaultValue={item.userName}></input>
                        <label>Email address</label>
                        <input type="email" defaultValue={item.email}></input>
                    </div>
                    <button type="submit" >Update</button>
                </Form>
            ))}
        </div>
    );
}

handleSubmit = (e) => {
    e.preventDefault();
    axios.put('http://localhost:3000/api/user/' + this.state.data, this.state.items).then(response => {
        //
    });
};

My API call looks like this:

app.put('/api/user/:userId', (req, res, err) => {
    User.update(
        { userName: req.body.userName, email: req.body.email },
        {
            where: {
                userId: req.params.userId
            }
        }
    ).then(function (rowsUpdated) {
        res.json(rowsUpdated)
    }).catch(err);
});

How can I modify this code to set a value for this.state.items with all the updated fields values and submit it?

Answer 1

I'd recommend to create a new component to wrap around the <Form /> and move the submit/change event handling to that component for each item. This would allow you to be able to extract individual email/userName for any given <Form /> to send as a PUT to your API endpoint as well as handle the respective input value changes.

Parent Component:

class Parent extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React',
      items: [
        { uId: 1, email: 'foo@test.com', userName: 'bar' },
        { uId: 2, email: 'baz@test.com', userName: 'foobar' }
      ]
    };
  }

  render() {
    return (
      <div>
        {this.state.items.map(item => 
          <MyForm key={item.uId} item={item} data={this.props.location.data} />)}
      </div>
    );
  }
}

Child/Form Component:

import React, { Component } from 'react';

class MyForm extends Component {
  constructor(props) {
    super(props);

    this.state = {
      email: this.props.item.email,
      userName: this.props.item.userName
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  // https://reactjs.org/docs/forms.html#handling-multiple-inputs
  handleChange(e) {
    const { target}  = event;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const { name }  = target;

    this.setState({ [name]: value });
  }

  handleSubmit(e) {
    e.preventDefault();

    const { email, userName } = this.state;
    const body = { email, userName };
    const json = JSON.stringify(body);
    console.log(json);

    // axios.put('http://localhost:3000/api/user/' + this.props.data, json).then(response => {});
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>User Name</label>
        <input type="text" defaultValue={this.state.userName}></input>
        <label>Email address</label>
        <input type="email" defaultValue={this.state.email}></input>

        <button type="submit" >Update</button>
      </form>
    );
  }
}

export default MyForm;

Here is an example in action.

Hopefully that helps!