For loop Iteration in reactjs table-CodePudding

I am learning to use the props and refactor the code in Reactjs. While working on the table to print the data I am repeating the table heading each time. Table.js

    import React from "react";
        const Table = ({ Service, Time, Price }) => {
          return (
            <div>
              <table>
                <tr>
                  <th>Service</th>
                  <th>Time</th>
                  <th>Price</th>
                  <th>Action</th>
                </tr>
                <tr>
                  <td> {Service}</td>
                  <td>{Time}</td>
                  <td>{Price}</td>
                </tr>
              </table>
            </div>
          );
};
export default Table;

and my service class where I am trying to use props.

import React from "react";
import Table from "../../Components/Table"; 
const Services = () => {
return (
<div>
    <Table Service={"Toes"} Time={"15 min"} Price={"$12"} />
    <Table Service={"Ears"} Time={"15 min"} Price={"$15"} />
    <Table Service={"Nose"} Time={"15 min"} Price={"$15"} />
</div>
 );
};

export default Services; but It displays

Service Time    Price   Action
Toes    15 min  $12
Service Time    Price   Action
Ears    15 min  $15
Service Time    Price   Action
Nose    15 min  $15

Can anyone help me how to use loop on this case?

CodePudding user response：

you can try:

import React, { useState } from "react";

const Table = ({ array }) => {
  const [services, setServices] = useState(array);

  return (
    <div>
      <table>
        <tr>
          <th>Service</th>
          <th>Time</th>
          <th>Price</th>
          <th>Action</th>
        </tr>
        {services.map(({ Service, Time, Price }) => (
          <tr>
            <td> {Service}</td>
            <td>{Time}</td>
            <td>{Price}</td>
          </tr>
        ))}
      </table>
    </div>
  );
};
export default Table;

And your services might look like:

import React from "react";
const defaultState = [
  { Service: "Toes", Time: "15 min", Price: 12 },
  { Service: "Ears", Time: "15 min", Price: 15 },
  { Service: "Nose", Time: "15 min", Price: 15 },
];
const Services = () => {
return (
   <div>
      <Table array={defaultState} />
   </div>
  );
};
export default Services;

and you can as data as array from your services.

CodePudding user response：

You'll want to have just one table component, and then each of the rows are created by mapping the data from an object in state to JSX components.

const defaultState = [
  { service: "Toes", time: "15 min", price: 12 },
  { service: "Ears", time: "15 min", price: 15 },
  { service: "Nose", time: "15 min", price: 15 }
];

const Table = () => {
  const [services, setServices] = useState(defaultState);

  return (
    <div>
      <table>
        <tr>
          <th>Service</th>
          <th>Time</th>
          <th>Price</th>
          <th>Action</th>
        </tr>
        {services.map(service => (
          <Service data={service} />
        ))}
      </table>
    </div>
  );
}

const Service = ({ service, time, price }) => {
  return (
    <tr>
      <td>{service}</td>
      <td>{time}</td>
      <td>${price}</td>
    </tr>
  );
}

Then when you eventually want the rows to be updated from an API or by the user, you can modify the state with a useEffect hook or with <input /> elements, respectively.