title: Mapping objects in an array to table in React
body: <p>Could you please help me in passing objects in a state array to the table using map method in react?
  I can able to push the object into the invoices array but I can't map into the table. 
  Please suggest if any other method is possible.</p>
  
  <p>Please neglect the below comments as I am going repeat the above context.</p>
  
  <p>Could you please help me in passing objects in a state array to the table using map method in react?
  I can able to push the object into the invoices array but I can't map into the table. 
  Please suggest if any other method is possible.</p>
  
  <pre><code>import React, { Component } from 'react';
  
  class Form extends Component {
  constructor(props) {
      super(props);
      this.state = {
          company: "",
          address: "",
          zip: "",
          date: "",
          description: "",
          unit: "",
          quantity: "",
          invoices: []
      };
  }
  
  handleChange = (e) =&gt; {
      e.preventDefault();
      this.setState({ [e.target.name]: e.target.value })
  };
  
  handleSubmit = (e) =&gt; {
      e.preventDefault();
      this.state.invoices.push({
          description: this.state.description,
          unit: this.state.unit,
          quantity: this.state.quantity
      });
      //console.log(this.state.invoices[].description);
  
  };
  
  render() {
      const hrStyle = {
          border: '5px solid rgb(23, 162, 184)'
      };
  
      const list = this.state.invoices.map((invoice, index) =&gt; {
          return (
              &lt;tr key={index}&gt;
                  &lt;td&gt;{invoice[index].description}&lt;/td&gt;
                  &lt;td&gt;{invoice[index].unit}&lt;/td&gt;
                  &lt;td&gt;{invoice[index].quantity}&lt;/td&gt;
                  &lt;td&gt;{invoice[index].unit * invoice[index].quantity}&lt;/td&gt;
              &lt;/tr&gt;
          )
      });
  
      return (
          &lt;React.Fragment&gt;
              &lt;div className='col-12 col-lg-6'&gt;
                  &lt;div className="jumbotron"&gt;
                      &lt;form&gt;
                          &lt;label&gt;&lt;h4&gt;Billed To: &lt;/h4&gt;&lt;/label&gt;&lt;br /&gt;
                          &lt;div className="form-group"&gt;
                              &lt;label&gt;Company Name&lt;/label&gt;
                              &lt;input onChange={this.handleChange} className="form-control" type="text" name="company" /&gt;
                          &lt;/div&gt;
                          &lt;div className="form-group"&gt;
                              &lt;label&gt;Address&lt;/label&gt;
                              &lt;input className="form-control" type="text" onChange={this.handleChange} name="address" /&gt;
                              &lt;label&gt;Zip Code&lt;/label&gt;
                              &lt;input className="form-control" type="number" onChange={this.handleChange} name="zip" /&gt;&lt;/div&gt;
                          &lt;div className="form-group"&gt;
                              &lt;label&gt;Date&lt;/label&gt;
                              &lt;input className="form-control" type="date" onChange={this.handleChange} name="date" /&gt;
                          &lt;/div&gt;
                      &lt;/form&gt;
                      &lt;form onSubmit={this.handleSubmit}&gt;
                          &lt;label&gt;&lt;h4&gt;Invoice: &lt;/h4&gt;&lt;/label&gt;&lt;br /&gt;
                          &lt;div className="form-group"&gt;
                              &lt;label&gt;Description&lt;/label&gt;
                              &lt;input className="form-control" type="text" onChange={this.handleChange} name="description" /&gt;
                          &lt;/div&gt;
                          &lt;div className="form-group"&gt;
                              &lt;label&gt;Unit Price&lt;/label&gt;
                              &lt;input className="form-control" type="number" onChange={this.handleChange} name="unit" /&gt;
                              &lt;label&gt;Quantity&lt;/label&gt;
                              &lt;input className="form-control" type="number" onChange={this.handleChange} name="quantity" /&gt;
                          &lt;/div&gt;
                          &lt;button className="btn btn-primary btn-sm"&gt;Add Invoices&lt;/button&gt;
  
                      &lt;/form&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div className="col-12 col-lg-6"&gt;
                  &lt;div className="container-fluid bg-info text-white"&gt;
                      &lt;div className="row"&gt;
                          &lt;div className="col text-left"&gt;
                              &lt;p&gt;Your Company Name&lt;/p&gt;
                              &lt;h2&gt;Invoice&lt;/h2&gt;
                          &lt;/div&gt;
                          &lt;div className="col text-right"&gt;
                              &lt;p&gt;22 Yusen St&lt;/p&gt;&lt;br /&gt;
                              &lt;p&gt;Auburn&lt;/p&gt;&lt;br /&gt;
                              &lt;p&gt;NSW&lt;/p&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div className="container-fluid"&gt;
                      &lt;div className="row"&gt;
                          &lt;div className="col-4"&gt;
                              &lt;p&gt;{this.state.company}&lt;/p&gt;
                              &lt;p&gt;{this.state.address}&lt;/p&gt;
                              &lt;p&gt;{this.state.Zip}&lt;/p&gt;
                          &lt;/div&gt;
                          &lt;div className="col-4"&gt;
                              &lt;div&gt;
                                  &lt;h5&gt;Invoive number&lt;/h5&gt;
                                  &lt;p&gt;{Math.floor((Math.random() * 100) + 1)}&lt;/p&gt;
                              &lt;/div&gt;
                              &lt;div&gt;
                                  &lt;h5&gt;Date&lt;/h5&gt;
                                  &lt;p&gt;{this.state.date}&lt;/p&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div className="col-4"&gt;
                              &lt;div&gt;
                                  &lt;h5&gt;Invoice Totals&lt;/h5&gt;
                                  &lt;p&gt;$2587.35&lt;/p&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;hr style={hrStyle} /&gt;
                  &lt;div className="Invoices"&gt;
                      &lt;table className="table"&gt;
                          &lt;thead&gt;
                              &lt;tr&gt;
                                  &lt;th&gt;Description&lt;/th&gt;
                                  &lt;th&gt;Unit Price&lt;/th&gt;
                                  &lt;th&gt;Quantity&lt;/th&gt;
                                  &lt;th&gt;Total&lt;/th&gt;
                              &lt;/tr&gt;
                          &lt;/thead&gt;
                          &lt;tbody&gt;
                              {list}
                          &lt;/tbody&gt;
                      &lt;/table&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/React.Fragment&gt;
  
      );
  }
  }
  
  export default Form;
  </code></pre>