Using React to create table from data

Question

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

I would suggest you start by trying by yourself or looking in some tutorials and replicate it. It would be more suitable to open the question with some implementation where you can have proper feedback on refining your code, and fixing your errors. — Rafael Buzatto de Campos
– Rafael Buzatto de Campos, Commented Mar 15, 2021 at 21:55
I appreciate the suggestion but I have been trying using various guides, stack posts, and tutorials,etc. I typically post on here as a last resort to help me get the ball rolling. You could try suggesting something more helpful, like a guide you recommend, or a direction to start in. Thanks for your time! — Derrick Wright
– Derrick Wright, Commented Mar 15, 2021 at 22:09

crispengari · Accepted Answer · 2021-03-16 00:13:21Z

1

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

answered Mar 16, 2021 at 0:13

crispengari

9,5518 gold badges59 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Derrick Wright Over a year ago

First, thanks for your comment! It does help a bit to have some idea of how someone else might handle this situation. My compiler is very picky and currently I'm trying to rewrite your ternary(?) operators. Can you tell me what the intention was with these? Here's an example of how I'm trying to rewrite these

Derrick Wright Over a year ago

const tableHeads = Object.keys ? (this.props.data[0]) : null;

Derrick Wright Over a year ago

I made some tweaks to the changes you made and was able to do what I needed to do. Thanks again for your comment!

crispengari Over a year ago

? operator protects some runtime errors just in case an object is null we don't want to read the property if the object is null. In React if for example you want to read this.props.data[0] and this.props is a null object it will throw an error saying can not read the property data of undefined so to avoid such error we use this.props?.data[0]

Collectives™ on Stack Overflow

Using React to create table from data

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related