how to insert data as an array of objects in React JS

Question

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:

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(
            
             Traveller # {t+1} Details


            
            
            
              First Name
              
            
            
              Last Name
              
            
          
          
            Address
            
          
          
            Phone Number
            
          
          
            
              City
              
            
            
              State
              
            
            
              Zip
              
            
              
            );
          
        }
      return travellers
        
      }

AbhishekGowda28 · Accepted Answer

I don't completely understand you problem, what I understand is.

There is a controller, Plus and Minus. On click of Plus a new Traveler form has to be added and on click of minus the last Travelers form will be removed. And also the traveler counter is incremented or decremented based on the button click

You would not want 2 variables, 1 to keep track of the number of travelers and other to store the traveler details, you can maintain only 1 variable. Just have traverlerDetails, we can get the number of travelers form the size of the traverlerDeterails array.

// state values
this.state = {
    travelersDetail: [],
    trip: null,
};


handleClick = (clickEvent) => {
    clickEvent.preventDefault();
    const travelersDetailCopy = [...this.state.travelersDetail];
    if (e.target.id == 'plus') {
        travelersDetailCopy.push({
            firstName: '', lastName: '', address: '', city: '' // Add empty data
        });
    } else if (e.target.id == 'minus') {
        if (this.state.travelersDetail.length === 1) {
            alert("Can't be less than 1");
        } else {
            travelersDetailCopy.pop();
        }
    }
    this.setState({
        travelersDetail: travelersDetailCopy
    });
}

const numberOfTraverlers = () => {
    return this.state.travelersDetail.map((travelerDetails, index) => {
        return (
            
                 Traveller # {index + 1} Details



                
                    
                        First Name
                         {this.handleTDChange(event, index, "firstName")}} id="firstName" placeholder="FirstName" />
                    
                    
                        Last Name
                         {this.handleTDChange(event, index, "lastName")}} id="lastName" placeholder="LastName" />
                    
                
                
                    Address
                     {this.handleTDChange(event, index, "address")}} id="address" placeholder="1234 Main St" />
                
                
                    Phone Number
                     {this.handleTDChange(event, index, "phoneNumber")}} id="phoneNumber" placeholder="+92..." />
                
                
                    
                        City
                        
                    
                    
                        State
                        
                    
                    
                        Zip
                         {this.handleTDChange(event, index, "zip")}} id="zip" />
                    
                
            
        )
    })
}


handleTDChange(event, index, updateField) {
    const arrayCopy = [...this.state.travelersDetail];
    arrayCopy[index][updateField] = event.target.value;
    this.setState({travelersDetail: arrayCopy});
}

Use this.state.travelersDetail.length to display the number of travelers.

Don't use for-loop, make use of built in functions like forEach, map, filter and other methods.

Update : To handle onChange events, you can have multiple handleChange event handler.

But if you want to do it in a single, you can pass few additional argument. First being the actual event, second the index of the travelerDetails object, third being the property that needs to be updated.

There is a much better way of doing this, extract the content in side the map and create a separate component. Which would contain the logic related to the component. With this updation and also maintenance of the code is much easier

how to insert data as an array of objects in React JS

Answers (2)

Related Questions