import React, { useState, useEffect, useRef } from 'react'; import { Table } from 'react-bootstrap'; import axios from 'axios'; const Nodes = ({ data }) => { const nodeList = data[0].children.map((data, index) => { return ( <tbody key={`tbody${index}`}> <tr> <td>{data.name}</td> <td>{data.cpu}</td> </tr> </tbody> ); }); return ( <div className='nodeContainer'> <h4 className='nodeTitle'>Nodes List</h4> <Table striped bordered hover> <thead> <tr> <th>Node Name</th> <th>CPU</th> </tr> </thead> {nodeList} </Table> </div> ); }; export default Nodes;