Being more concise React - reactjs

Question

This is my React hw, (it works, I have been trying to wrap my head around concepts in order to either do less tables for the JSX or anything really). Anything to make it to where I don't have to make a model of anything more than once tables or whatever be it :
import React from 'react';
import ReactDOM from 'react-dom';
const groceryList = (State1, State2, State3, State4,Pop1, Pop2, Pop3,Pop4,Cap1,Cap2, Cap3, Cap4) => {
return (
<table>
<th>State</th>
<th>Population</th>
<th>Capital</th>
<tr>
<td>{State1}</td>
<td>{Pop1}</td>
<td>{Cap1}</td>
</tr>
<tr>
<td>{State2}</td>
<td>{Pop2}</td>
<td>{Cap2}</td>
</tr>
<tr>
<td>{State3}</td>
<td>{Pop3}</td>
<td>{Cap3}</td>
</tr>
<tr>
<td>{State4}</td>
<td>{Pop4}</td>
<td>{Cap4}</td>
</tr>
</table>
);
};
ReactDOM.render(
groceryList('Idaho', 'Tennessee', 'Main', 'Wisconsin', '', '6.65 Million', '1.31 Million', '5.779 Million', 'Boise', 'Nashville', 'Agusta', 'Madison'),
document.getElementById('root')
);

Answer 1

You can define an array of objects and pass it as a prop. This works for you because all objects will have same structure and you are rendering them as <td> elements. So you can map over the array and display your items.
const GroceryList = ({ items }) => {
return (
<table>
<tr>
<th>State</th>
<th>Population</th>
<th>Capital</th>
</tr>
{items.map(({ state, pop, cap }) => (
<tr>
<td>{state}</td>
<td>{pop}</td>
<td>{cap}</td>
</tr>
))}
</table>
);
};
const items = [
{ state: "Idaho", pop: "6.65 Million", cap: "Boise" },
{ state: "Tennessee", pop: "1.31 Million", cap: "Nashville" },
];
ReactDOM.render(<GroceryList items={items} />, document.getElementById("root"));
th { text-align: left }
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
map() - is a method which returns a transformed array from an array.
{state,pop,cap} - here we are destructuring the object, by using property names.

Answer 2

I think the best way to approach this to break it into reusable components. I would probably make a table row a component...
// TableRow.js
import React from "react";
function TableRow(props) {
return (
<tr>
<td>{props.state}</td>
<td>{props.population}</td>
<td>{props.capital}</td>
</tr>
);
}
export default TableRow;
A table component that uses the JavaScript map function to map rows to the table from an array...
// Table.js
import React from "react";
import TableRow from "./TableRow";
const states = [
{ state: "Massachusetts", population: 6000000, capital: "Boston" }
];
function Table(props) {
return (
<table>
<th>State</th>
<th>Population</th>
<th>Capital</th>
{states.map((state) => (
<TableRow
state={state.state}
population={state.population}
capital={state.capital}
/>
))}
</table>
);
}
export default Table;
And then an App component that displays the table...
// App.js
import "./styles.css";
import Table from "./Table";
export default function App() {
return (
<div className="App">
<Table />
</div>
);
}