Form data binding with repeated forms in React

Question

Parent Component

I have a parent component Users with the following snippet:

addUser(index, user) {
    var users = this.state.users
    var existingUser = users[index]
    if (existingUser !== undefined) {
        this.updateUser(index, user)
    } else {
        users.push(user)
        this.setState({
            users : users
        })
    }
}

updateUser(index, itemAttributes) {
    this.setState({
        travellers: [
            ...this.state.users.slice(0,index),
            Object.assign({}, this.state.users[index], itemAttributes),
            ...this.state.users.slice(index+1)
        ]
    });
}

The updateUser functionality has been taken from React: Updating state when state is an array of objects

And in JSX I have the following snippet:

...
<Form onSubmit={this._handleFormSubmit.bind(this)}>
  <UserDetails index={0} callback = {this.addUser.bind(this)}/>
  <UserDetails index={1} callback = {this.addUser.bind(this)}/>
  <input type="submit" className="btn btn-primary mb-4" value="Continue"/>
</Form>
...

Child Component

Then in the child component UserDetails I have:

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})
    this.props.callback(this.props.index, this.state.formValues)
}

And in JSX:

<div className="row">
    <div className="col-md-4">
        <FormGroup>
            <Label>First Name</Label>
            <Input type="text" name="firstName" placeholder="First Name" value={this.state.formValues["firstName"]} onChange={this.handleChange.bind(this)} />
        </FormGroup>
    </div>
    <div className="col-md-4">
        <FormGroup>
            <Label>Last Name</Label>
            <Input type="text" name="lastName" placeholder="Last Name" value={this.state.formValues["lastName"]} onChange={this.handleChange.bind(this)} />
        </FormGroup>
    </div>
</div>

Now I can see two forms, each with a First Name and a Last Name fields. Now the problem is when I enter the First Name for the first user, the First Name for the second user is also automatically set to that of the first user. Thus, I cannot enter separate names for the two users. How can I solve this issue?

I see that you are mutating the state directly by using let formValues = this.state.formValues; and formValues[name] = value; One way to alleviate this issue is to spread the formValues before assigning let formValues = {...this.state.formValues}; or you can use Immer. — hungdoansy
– hungdoansy, Commented Nov 3, 2020 at 6:52
Thank you @dOshu. Using the spread operator solved my problem. If you would add your comment as an answer, I would accept it. Thanks again! — Kshitij Bajracharya
– Kshitij Bajracharya, Commented Nov 3, 2020 at 9:37

hungdoansy · Accepted Answer · 2020-11-04 04:54:40Z

1

I see that you are mutating the state directly by using

let formValues = this.state.formValues; 
formValues[name] = value;

One way to alleviate this issue is to spread the formValues before assigning

let formValues = {...this.state.formValues};

or you can use Immer

answered Nov 4, 2020 at 4:54

hungdoansy

4864 silver badges11 bronze badges

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

Collectives™ on Stack Overflow

Form data binding with repeated forms in React

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related