Adding dynamic states in reactJs

I created a reactJs page that allows an admin add a user to a platform. Now, instead of submitting the form for each new user, the admin can add as many users as possible before submitting the form. By default, one table row containing input fields is displayed and then on click of the add button, a new row is added and the admin can fill the necessary details.

I want to add an onChange event to the input fields for each new row. I don’t know how to do as this is quite dynamic. The state will have to change as new rows is added. I don’t know how to go about updating this state and adding the onChange event for each field in each row. Here is my existing code:

export default class Admins extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            errors : '',
            success : '',
            rows : [1]
        }
        this.addRow = this.addRow.bind(this);
        this.fetchRows = this.fetchRows.bind(this);
        this.removeRow = this.removeRow.bind(this);
    }
    addRow(){
        var last = this.state.rows[this.state.rows.length-1];
        var current = last + 1;
        this.setState({
            rows : this.state.rows.concat(current)
        });
    }
    removeRow(index){
        var array = this.state.rows;
        array.splice(index, 1)
        this.setState({
            rows : array
        })
    }
    fetchRows(){
        return this.state.rows.map((row, index) => (
            //console.log(row, index)
            <tr key={row}>
                <td className="text-center">
                    <button type="button" onClick={(e)=> this.removeRow(index)} data-toggle="tooltip" className="btn btn-xs btn-danger"
                            data-original-title=""><i className="fa fa-trash"></i>
                    </button>
                </td>
                <td>
                    <input type="text" className="form-control" onChange={}/>
                </td>
                <td>
                    <input type="text" className="form-control" onChange={}/>
                </td>
                <td>
                    <input type="text" className="form-control" onChange={}/>
                </td>
            </tr>
        ));
    }
    render(){
        return(
            <div>
                <Top/>
                <SideBar/>
                <div className="breadcrumb-holder">
                    <div className="container-fluid">
                        <ul className="breadcrumb">
                            <li className="breadcrumb-item"><Link to="/">Dashboard</Link></li>
                            <li className="breadcrumb-item active">Admins</li>
                        </ul>
                    </div>
                </div>
                <section className="forms">
                    <div className="container-fluid">
                        <header>
                            <h3 className="h5 display">Admins</h3>
                        </header>

                        <div className="row">
                            <div className="col-lg-6">
                                <h5 className="text-danger">{this.state.errors}</h5>
                                <h5 className="text-success">{this.state.success}</h5>
                            </div>
                        </div>
                        <div className="row">
                            <div className="col-lg-6">
                                <div className="card">
                                    <div className="card-header d-flex align-items-center">
                                        <h5></h5>
                                    </div>
                                    <div className="card-body">
                                        <table className="table table-bordered">
                                            <thead>
                                            <tr>
                                                <th  width="5%">Actions</th>
                                                <th>Name</th>
                                                <th>Email</th>
                                                <th>Password</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                                {this.fetchRows()}
                                                <tr>
                                                    <td className="text-center">
                                                        <button type="button" onClick={this.addRow} data-toggle="tooltip" className="btn btn-xs btn-primary"
                                                                data-original-title=""><i className="fa fa-plus"></i>
                                                        </button>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        );
    }
}

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

You could create a method onChange that takes in the event and the index of the row that got changed, and use the name and the value of the input that changed combined with the index of the row in the array to figure out what field to update.

Example

class Admins extends React.Component {
  state = {
    errors: "",
    success: "",
    rows: []
  };

  addRow = () => {
    this.setState(previousState => {
      return {
        rows: [...previousState.rows, { name: "", email: "", password: "" }]
      };
    });
  };

  removeRow = index => {
    this.setState(previousState => {
      const rows = [...previousState.rows];
      rows.splice(index, 1);
      return { rows };
    });
  };

  onChange = (event, index) => {
    const { name, value } = event.target;

    this.setState(previousState => {
      const rows = [...previousState.rows];
      rows[index] = { ...rows[index], [name]: value };
      return { rows };
    });
  };

  render() {
    return (
      <div>
        <div className="breadcrumb-holder">
          <div className="container-fluid">
            <ul className="breadcrumb">
              <li className="breadcrumb-item active">Admins</li>
            </ul>
          </div>
        </div>
        <section className="forms">
          <div className="container-fluid">
            <header>
              <h3 className="h5 display">Admins</h3>
            </header>
            <div className="row">
              <div className="col-lg-6">
                <h5 className="text-danger">{this.state.errors}</h5>
                <h5 className="text-success">{this.state.success}</h5>
              </div>
            </div>
            <div className="row">
              <div className="col-lg-6">
                <div className="card">
                  <div className="card-header d-flex align-items-center">
                    <h5 />
                  </div>
                  <div className="card-body">
                    <table className="table table-bordered">
                      <thead>
                        <tr>
                          <th width="5%">Actions</th>
                          <th>Name</th>
                          <th>Email</th>
                          <th>Password</th>
                        </tr>
                      </thead>
                      <tbody>
                        {this.state.rows.map((row, index) => (
                          <tr key={row}>
                            <td className="text-center">
                              <button
                                type="button"
                                onClick={e => this.removeRow(index)}
                                data-toggle="tooltip"
                                className="btn btn-xs btn-danger"
                                data-original-title=""
                              >
                                <i className="fa fa-trash" />
                              </button>
                            </td>
                            <td>
                              <input
                                type="text"
                                name="name"
                                className="form-control"
                                value={row.name}
                                onChange={e => this.onChange(e, index)}
                              />
                            </td>
                            <td>
                              <input
                                type="text"
                                name="email"
                                className="form-control"
                                value={row.email}
                                onChange={e => this.onChange(e, index)}
                              />
                            </td>
                            <td>
                              <input
                                type="text"
                                name="password"
                                className="form-control"
                                value={row.password}
                                onChange={e => this.onChange(e, index)}
                              />
                            </td>
                          </tr>
                        ))}
                        <tr>
                          <td className="text-center">
                            <button
                              type="button"
                              onClick={this.addRow}
                              data-toggle="tooltip"
                              className="btn btn-xs btn-primary"
                              data-original-title=""
                            >
                              <i className="fa fa-plus" />
                            </button>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>
      </div>
    );
  }
}


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x