score:5

Accepted answer

It is better to provide what have you tried up to now and where you got stuck. In SO, if you don't provide that information your question probably will be closed. But, here is a welcome present: You can use JS expressions in JSX, how good. So, as @Roy Scheffers suggested you can use map to do create tables or anything you want.

const data = [
  { name: "Video1", text: "video 1 text" },
  { name: "Video2", text: "video 2 text" },
  { name: "Video3", text: "video 3 text" },
];

const App = () => (
  <div>
    <table>
      {data.map(el => (
        <tr>
          <td>{el.name}</td>
          <td>{el.text}</td>
        </tr>
      ))}
    </table>
  </div>
);

ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

This example is just for fun:

class App extends React.Component {
  state = {
    data: [
      { name: "Video1", text: "video 1 text" },
      { name: "Video2", text: "video 2 text" },
      { name: "Video3", text: "video 3 text" },
    ],
    count: 1,
  };

  updateTable = () => { 
    this.setState(prevState => ({
      data: [...prevState.data, { name: `foo${prevState.count}`, text: `bar${prevState.count}` }],
      count: prevState.count += 1,
    }))
    if (this.state.data.length > 5) { clearInterval(this.intervalId); }
  }

  componentDidMount() {
    this.intervalId = setInterval(this.updateTable, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.intervalId);
  }

  render() {
    return (
      <div>
        <table border="1">
          {this.state.data.map(el => (
            <tr>
              <td>{el.name}</td>
              <td>{el.text}</td>
            </tr>
          ))}
        </table>
      </div>
    );
  }
}


ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

score:0

There are some great React npm projects out there as well that can do this for you and give you a lot of flexibility. I found this one https://github.com/agracio/ts-react-json-table and it looks really cool. I haven't used it just yet, but I am about to, as I was searching for something to take JSON and make a table quickly.


Related Query

More Query from same tag