[Solved]-How do I iterate though an array of objects with keys and values in react and render them in the JSX( Both keys and Values)-Reactjs

It seems you have an array of objects where each object is a collection of key-value pairs where the values are the nested arrays you want to map. Don't forget to return the JSX you are mapping.

const tableData = result && result.map(res=> {
  return Object.entries(res).map(([key, value], index) => {
    return (
      <Fragment key={key}>
        <TableRow style={{backgroundColor:'#E6E6FA', textAlign:'center'}}>
          <TableCell colSpan={9} style={{backgroundColor:'#E6E6FA'}}>{key}</TableCell>
        </TableRow>
        {value.map((object) => {
          return (
            <TableRow style={{backgroundColor:'#FAFAFA', textAlign:'center'}}>
              ...
            </TableRow>
          );
        })}
      </Fragment>
    );
  })
})