<html><head> <meta charset="UTF-8"> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script> <!---this is used to compile on run time---> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script></head><body> <h3> React Js Rendering an array of objects as a table using map() function</h3> <div id="app"></div> <script type="text/babel"> function App() { const users = [ { name: "Alice", age: 25 }, { name: "Bob", age: 30 }, { name: "Charlie", age: 35 }, ]; return ( <table> <thead> <tr> <th>Name</th> <th>Age</th> </tr> </thead> <tbody> {users.map((user) => ( <tr key={user.name}> <td>{user.name}</td> <td>{user.age}</td> </tr> ))} </tbody> </table> ); } ReactDOM.render(<App />, document.getElementById('app')); </script></body></html>