using props to get value from a table

Question

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/react-bootstrap@2.5.0";

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

Answer 1

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/react-bootstrap@2.5.0";

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