Using React to create table from data - reactjs

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

Answer 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