using props to get value from a table-CodePudding

I am trying to build one table using props, and pass the value from that table to another function. But for some reason, the result is not displaying. What have I done wrong?

import Table from "https://cdn.skypack.dev/[email protected]";

function Tables(props) {
  
  return (
  <Table>
    <thead>
      <tr>
        <th>a</th>
        <th>b</th>
        <th>c</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>{props.first}</td>
        <td>{props.second}</td>
        <td>{props.third}</td>
      </tr>
    </tbody>
  </Table>
      )
}

function App() {
  return (
    <div>
      <Tables first="Sara" />
      <Tables second="Cahal" />
      <Tables third="Edite" />
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

CodePudding user response：

You are rendering the table three times, each one with only one prop, you need to

If you want to show one table with the three props, it should be like that.

import Table from "https://cdn.skypack.dev/[email protected]";

function Tables(props) {
  
  return (
  <Table>
    <thead>
      <tr>
        <th>a</th>
        <th>b</th>
        <th>c</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>{props.first}</td>
        <td>{props.second}</td>
        <td>{props.third}</td>
      </tr>
    </tbody>
  </Table>
      )
}

function App() {
  return (
    <div>
      <Tables first="Sara" second="Cahal" third="Edite" />
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);