How to implement a dynamic form with controlled components in ReactJS?

Question

As I am looking at the examples in the reference for controlled form components in react.js official website, I am wondering how is one supposed to implement a

Answer 1

import React, { Component, } from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
var childJson = []
export default class AddInvoice extends Component {
constructor(props) {
    super(props);
    this.state = {
        Json: [],
        rows: [{}]
    }
}

handleChange = idx => e => {
    const { name, value } = e.target;
    const rows = [...this.state.rows];
    rows[idx] = { [name]: value };
    this.setState({ rows });

    console.log(`rows-->>${this.state.rows[idx].amount}`);
    childJson.push(this.dynamicJson(this.state.rows, idx))
    this.setState({ Json: childJson })

};
handleAddRow = () => {
    const item = {
        name: "",
        mobile: "",
        btn: ""
    };
    this.setState({
        rows: [...this.state.rows, item]
    });
};
handleRemoveRow = (idx) => {
    this.state.rows.splice(idx, 1);
    this.setState({ rows: this.state.rows });
};
dynamicJson(rows, index) {
    return {
        "service": rows[index].text,
        "tax": rows[index].tax,
        "amount": rows[index].amount
    }
};
render() {
    return (
        

            

                

                
                

                    
INVOICE-ADD NEW
                
                

                
            
            

                

                
                

                    

                        

                            

                                

                                    

                                        Invoice No
                                         this.setState({ invoiceno: e.target.value })} />
                                    
                                
                                

                                    

                                        Customer
                                         this.setState({ customer: e.target.value })}>
                                            select
                                            sohanpatil@gmail.com
                                            mayurawati@gmail.com
                                            nasirpatel@gmail.com
                                            nandkishorshinde@gmail.com
                                        
                                    
                                
                                

                                    

                                        

                                            Invoice Date
                                            

                                                

                                                    
                                                     this.setState({ invoicedate: e.target.value })} />
                                                
                                            
                                        
                                    
                                    

                                        

                                            Due Date
                                            

                                                

                                                    
                                                     this.setState({ duedate: e.target.value })} />
                                                
                                            
                                        
                                    
                                
                                

                                    

                                        

                                            Header
                                             this.setState({ header: e.target.value })} />
                                        
                                    
                                    

                                        

                                            Remark
                                             this.setState({ remark: e.target.value })} />
                                        
                                    
                                
                                

                                    

                                        Save
                                        Clear
                                        Cancel
                                    
                                

                                

                                    

                                        

                                            
Action
                                        
                                    
                                    

                                        

                                            
Text
                                        
                                    
                                    

                                        

                                            
Tax
                                        
                                    
                                    

                                        

                                            
Amount
                                        
                                    
                                
                                {this.state.rows.map((item, idx) => (
                                    

                                        

                                            

                                                
 this.handleRemoveRow(idx)}>
                                                    
                                                
                                            
                                        

                                        

                                            

                                                
                                            
                                        

                                        

                                            

                                                
                                                    Select
                                                    STAX
                                                    VAT
                                                
                                            
                                        

                                        

                                            

                                                
                                            
                                        
                                    

                                ))}
                                

                                    

                                        

                                            

                                                
                                                Add
                                            
                                        
                                    
                                
                            
                        
                    
                
                

                
            

        
    );
}

}