my question is a little complicated, I am building a trip-related web application where users can book trips. So I have made a function that increases the number of travelers as the user clicks the + sign. when this function is called it changes the state and another function gets triggered that displays the form to fill in the traveler details. Now this form is rendered according to the number of travelers traveling. how can I set that data in an array of objects?

here's a screenshot guide:

[![enter image description here](https://i.stack.imgur.com/rCxOQ.jpg)](https://i.stack.imgur.com/rCxOQ.jpg)

I want the data to be in the state like this:

```
travelersDetail: [{firstName: 'Farrukh', lastName:'Ayaz', address:'...', city:'Lahore'},
                  {firstName: 'Dwight', lastName:'Schrute', address:'...', city:'Scranton'},
                  {firstName: 'Micheal', lastName:'Scott', address:'...', city:'Scranton'},]

```

My code:

```
    // state

        state = {
            NumOfTravellers : 1,
            travelersDetail: [],        
            trip: null,
        }

    // the functions that increases the number of travelers

        handleClick = (e) =>{
            e.preventDefault();
            if(e.target.id == 'plus'){
            this.setState({NumOfTravellers: this.state.NumOfTravellers + 1 })

            }
            else if(e.target.id == 'minus'){
               this.state.NumOfTravellers > 1 ? this.setState({NumOfTravellers: 
               this.state.NumOfTravellers - 1 }) : alert("can't be less than that :)")
            }
        }

// the function that returns the traveler details form, according to the number of travelers traveling.

 const numberOfTravelers = () =>{
        var travellers = [];

        for(let t = 0; t < this.state.NumOfTravellers; t++){
          travellers.push(
            <div >
            <h4> Traveller # {t+1} Details</h4><br/>

            <div className="form-row">
            <div className="form-group col-md-6">
              <label htmlFor="firstName">First Name</label>
              <input type="firstName" className="form-control" onChange={this.handleTDChange} id="firstName" placeholder="FirstName" />
            </div>
            <div className="form-group col-md-6">
              <label htmlFor="lastName">Last Name</label>
              <input type="lastName" className="form-control" onChange={this.handleTDChange} id="lastName" placeholder="LastName" />
            </div>
          </div>
          <div className="form-group">
            <label htmlFor="address">Address</label>
            <input type="text" className="form-control" onChange={this.handleTDChange} id="address" placeholder="1234 Main St" />
          </div>
          <div className="form-group">
            <label htmlFor="phoneNumber">Phone Number</label>
            <input type="tel" className="form-control" onChange={this.handleTDChange} id="phoneNumber" placeholder="+92..." />
          </div>
          <div className="form-row">
            <div className="form-group col-md-6">
              <label htmlFor="city">City</label>
              <select onChange={this.handleTDChange} id="city" className="form-control">
              <option selected>Choose...</option>
              <option>Lahore</option>
              <option>Islamabad</option>
              <option>Karachi</option>
              <option>Rawalpindi</option>
              <option>Quetta</option>
              <option>Multan</option>
            </select>
            </div>
            <div className="form-group col-md-4">
              <label htmlFor="state">State</label>
              <select onChange={this.handleTDChange} id="state" className="form-control">
                <option selected>Choose...</option>
                <option>Pakistan</option>
              </select>
            </div>
            <div className="form-group col-md-2">
              <label htmlFor="zip">Zip</label>
              <input type="text" className="form-control" onChange={this.handleTDChange} id="zip" />
            </div>
          </div>    
            </div>);

        }
      return travellers

      }

```