How can i use array input in react.js

Question

I have an array of degrees in Students collection as a part of a bigger model mongodb and in degrees array i have note like an element how can i use it in form like an input and add it in table

Create.js Component Form: Construtor with attributes types string and array


  constructor() {
    super();
    this.state = {
      firstname: '',
      lastname: '',
      degrees : [
         {id '',
          note ''
          }
      ]
    };
  }

  onSubmit = (e) => {
    e.preventDefault();

    const { firstname, lastname } = this.state;

    axios.post('/students', { firstname, lastname })
      .then((result) => {
        this.props.history.push("/")
      });
  }

Rander method for the form


  render() {
    const { firstname, lastname , degrees } = this.state;
    return (
      <div class="container">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h3 class="panel-title">
              Add Student
            </h3>
          </div>
          <div class="panel-body">
            <h4><Link to="/"><span class="glyphicon glyphicon-th-list" aria-hidden="true"></span> Students List</Link></h4>
            <form onSubmit={this.onSubmit}>
              <div class="form-group">
                <label for="isbn">First Name:</label>
                <input type="text" class="form-control" name="firstname" value={firstname} onChange={this.onChange} placeholder="First Name" />
              </div>
              <div class="form-group">
                <label for="title">Last Name:</label>
                <input type="text" class="form-control" name="lastname" value={lastname} onChange={this.onChange} placeholder="Last Name" />
              </div>

              <button type="submit" class="btn btn-default">Submit</button>
            </form>
          </div>
        </div>
      </div>
    );
  }

App.js Component Table for listing the form like First Name| Last Name |Note

  constructor(props) {
    super(props);
    this.state = {
      students: []
    };
  }

  componentDidMount() {
    axios.get('/students')
      .then(res => {
        this.setState({ students: res.data });
        console.log(this.state.students);
      });
  }

Render method for listing data


  render() {
    return (
      <div class="container">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h3 class="panel-title">
              Students List
            </h3>
          </div>
          <div class="panel-body">
            <h4><Link to="/create"><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span> Add Student</Link></h4>
            <table class="table table-stripe">
              <thead>
                <tr>
                  <th>First Name</th>
                  <th>Last Name</th>
                  <th>Note</th>
                </tr>
              </thead>
              <tbody>
                {this.state.students.map(c =>
                  <tr>
                    <td><Link to={`/show/${c.id}`}>{c.firstname}</Link></td>
                    <td>{c.lastname}</td>
                  </tr>
                )}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    );
  }

Where is the implementation of onSubmit ? If you only need to take care of 1 single note, consider having 1 note in the state. Then, on the function that adds it to the db, you store it accordingly as expected. — w35l3y, Jul 17 '20 at 06:37
@Lili search it, you will find many solutions. Check these: https://stackoverflow.com/questions/42316604/how-to-implement-a-dynamic-form-with-controlled-components-in-reactjs & https://itnext.io/building-a-dynamic-controlled-form-in-react-together-794a44ee552c — bakar_dev, Jul 17 '20 at 06:42

score 0 · Answer 1 · answered Jul 17 '20 at 06:52

Create a function in your parent component (App.js)

updateStudentList = newStudent => {
  this.setState( prevState => ({
   students: [...prevState.students, newStudent];
  }));

Pass this function as props to your child component (Create.js) Sumbit your form to your server. If it was submitted successfully, execute

this.props.updateStudentList({
    firstname: this.state.firstname, 
    lastname: this.state.lastname
});

Once (App.js) 's state students is changed, render will be trigger and you should see your table has a new student

How can i use array input in react.js

1 Answers1