Being more concise React-CodePudding

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')
  );

CodePudding user response：

You can define an array of objects and pass it. This works for you cause all objects will have same structure and you are showing them as <td> elements. So You can run a loop over the array and display your items.

import React from 'react';
import ReactDOM from 'react-dom';

const groceryList = (items) => {
    return (
        <table>
            <th>State</th>
            <th>Population</th>
            <th>Capital</th>
        {items.map(({state , pop , cap}) => {
   return (<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),
    document.getElementById('root')
  );

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.

Note: In the arrow function you can skip the return statement too, but you will have to change the code a bit. This should be good to start.

CodePudding user response：

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>
  );
}