CODEWITHSUNDEEP
reactjshtml-table
Derrick Wright
Derrick Wright

Reputation: 114

Using React to create table from data

as the question suggests I am brand new to react and am trying to create a table to display some data.

Here's what I have so far

const { Component } = React;
const { render } = ReactDOM;

class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            cars: [
                {
                    "manufacturer": "Toyota",
                    "model": "Rav4",
                    "year": 2008,
                    "stock": 3,
                    "price": 8500
                },

                {
                    "manufacturer": "Toyota",
                    "model": "Camry",
                    "year": 2009,
                    "stock": 2,
                    "price": 6500
                },

                {
                    "manufacturer": "Toyota",
                    "model": "Tacoma",
                    "year": 2016,
                    "stock": 1,
                    "price": 22000
                },

                {
                    "manufacturer": "BMW",
                    "model": "i3",
                    "year": 2012,
                    "stock": 5,
                    "price": 12000
                },

                {
                    "manufacturer": "Chevy",
                    "model": "Malibu",
                    "year": 2015,
                    "stock": 2,
                    "price": 10000
                },

                {
                    "manufacturer": "Honda",
                    "model": "Accord",
                    "year": 2013,
                    "stock": 1,
                    "price": 9000
                },

                {
                    "manufacturer": "Hyundai",
                    "model": "Elantra",
                    "year": 2013,
                    "stock": 2,
                    "price": 7000
                },

                {
                    "manufacturer": "Chevy",
                    "model": "Cruze",
                    "year": 2012,
                    "stock": 2,
                    "price": 5500
                },

                {
                    "manufacturer": "Dodge",
                    "model": "Charger",
                    "year": 2013,
                    "stock": 2,
                    "price": 16000
                },

                {
                    "manufacturer": "Ford",
                    "model": "Mustang",
                    "year": 2009,
                    "stock": 1,
                    "price": 8000
                },]
        };
    }

    render() {
      const columns = [{
        Header: 'Manufacturer',
        accessor: 'manufacturer'
      },{
        Header: 'Model',
        accessor: 'model'
      },{
        Header: 'Year',
        accessor: 'year'
      },{
        Header: 'Stock',
        accessor: 'stock'
      },{
        Header: 'Price',
        accessor: 'price'
      },{
        Header: 'Option',
        accessor: 'option'
      }]
        return (
            <div>
            <Table
              data = {this.state.cars}
              colums = {columns}
              />
            </div>
        );
    };
}

ReactDOM.render(<App />, document.getElementById("app"))

Im getting errors that the table is not defined but when I try to define it, that throws me errors as well. The table doesn't need to be fancy, the simpler the better in fact.

I was thinking of doing something like what was done in this post: https://codereview.stackexchange.com/questions/212250/generating-a-table-based-on-an-array-of-objects.

Any suggestions?

UPDATE

After the very helpful comment from Crispen Gari, I made some tweaks and came up with this

class App extends React.Component {
   constructor(props) {
   super(props);

   this.state = {
     cars: [
       {
          manufacturer: "Toyota",
          model: "Rav4",
          year: 2008,
          stock: 3,
          price: 8500,
        },

       {
         manufacturer: "Toyota",
         model: "Camry",
         year: 2009,
         stock: 2,
         price: 6500,
      },
      {
         manufacturer: "Toyota",
         model: "Tacoma",
      year: 2016,
      stock: 1,
      price: 22000,
    },

    {
      manufacturer: "BMW",
      model: "i3",
      year: 2012,
      stock: 5,
      price: 12000,
    },

    {
      manufacturer: "Chevy",
      model: "Malibu",
      year: 2015,
      stock: 2,
      price: 10000,
    },

    {
      manufacturer: "Honda",
      model: "Accord",
      year: 2013,
      stock: 1,
      price: 9000,
    },

    {
      manufacturer: "Hyundai",
      model: "Elantra",
      year: 2013,
      stock: 2,
      price: 7000,
    },

    {
      manufacturer: "Chevy",
      model: "Cruze",
      year: 2012,
      stock: 2,
      price: 5500,
    },

    {
      manufacturer: "Dodge",
      model: "Charger",
      year: 2013,
      stock: 2,
      price: 16000,
    },

    {
         manufacturer: "Ford",
         model: "Mustang",
         year: 2009,
         stock: 1,
          price: 8000,
        },
      ],
    };
 }
render() {
 return (
   <div>
     <Table data={this.state.cars} />
   </div>
 );
}
}

class Table extends React.Component {
  constructor(props) {
   super(props);
  }

  render() {
    const tableHeads = Object.keys(this.props.data[0]);
    return (
      <table border="1">
        <thead>
         {tableHeads.map((tableHead, i) => (
           <th key={i}>{tableHead}</th>
         ))}
        </thead>
       <tbody>
         {this.props.data.map((value, key) => (
           <tr key={key}>
              <td>{value.manufacturer}</td>
              <td>{value.model}</td>
              <td>{value.year}</td>
              <td>{value.stock}</td>
              <td>{value.price}</td>
          </tr>
         ))}
       </tbody>
     </table>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("app"))

This post can be considered closed

Upvotes: 0

Views: 294

Answers (1)

crispengari
crispengari

Reputation: 9343

Hey, Try this code if you face any problems of understanding, let me know. I recommend you to copy and paste this code if it works go through it and try to understand. The most important thing is to understand JavaScript higher order function map

 import React from "react";

class App extends React.Component {
   constructor(props) {
   super(props);

   this.state = {
     cars: [
       {
          manufacturer: "Toyota",
          model: "Rav4",
          year: 2008,
          stock: 3,
          price: 8500,
        },

       {
         manufacturer: "Toyota",
         model: "Camry",
         year: 2009,
         stock: 2,
         price: 6500,
      },
      {
         manufacturer: "Toyota",
         model: "Tacoma",
      year: 2016,
      stock: 1,
      price: 22000,
    },

    {
      manufacturer: "BMW",
      model: "i3",
      year: 2012,
      stock: 5,
      price: 12000,
    },

    {
      manufacturer: "Chevy",
      model: "Malibu",
      year: 2015,
      stock: 2,
      price: 10000,
    },

    {
      manufacturer: "Honda",
      model: "Accord",
      year: 2013,
      stock: 1,
      price: 9000,
    },

    {
      manufacturer: "Hyundai",
      model: "Elantra",
      year: 2013,
      stock: 2,
      price: 7000,
    },

    {
      manufacturer: "Chevy",
      model: "Cruze",
      year: 2012,
      stock: 2,
      price: 5500,
    },

    {
      manufacturer: "Dodge",
      model: "Charger",
      year: 2013,
      stock: 2,
      price: 16000,
    },

    {
         manufacturer: "Ford",
         model: "Mustang",
         year: 2009,
         stock: 1,
          price: 8000,
        },
      ],
    };
 }

render() {
 return (
   <div>
     <Table data={this.state.cars} />
   </div>
 );
}
}

class Table extends React.Component {
  constructor(props) {
   super(props);
  }

  render() {
    const tableHeads = Object.keys(this.props?.data[0]);
    return (
      <table border="1">
        <thead>
         {tableHeads.map((tableHead, i) => (
           <th key={i}>{tableHead}</th>
         ))}
        </thead>
       <tbody>
         {this.props?.data?.map((value, key) => (
           <tr key={key}>
              <td>{value?.manufacturer}</td>
              <td>{value?.model}</td>
              <td>{value?.year}</td>
              <td>{value?.stock}</td>
              <td>{value?.price}</td>
          </tr>
         ))}
       </tbody>
     </table>
    );
  }
}
export default App;

I Hope this will help you, Good Luck

Upvotes: 1

Related Questions