Rendern Sie JSON in einer HTML-Tabelle in React js

Ich schreibe einen Code in Reaktion, in dem ich die JSON-Daten in einer HTML-Tabelle anzeigen möchte. Ich möchte, dass dies dynamisch ist. dh unabhängig von der Art der json-Daten, die ich verwende, sollten sie im Tabellenformat gerendert werden.

Hier ist mein Code mit Beispieldaten.

const jsArray = [{"Model":"Mazda RX4","mpg":21,"cyl":6},{"Model":"Mazda RX4 Wag","mpg":21,"cyl":6},{"Model":"Datsun 710","mpg":22.8,"cyl":""},{"Model":"Hornet 4 Drive","mpg":21.4,"cyl":""},{"Model":"Hornet Sportabout","mpg":18.7,"cyl":8},{"Model":"Valiant","mpg":18.1,"cyl":6}];
 {jsArray.length > 0 && (
 <table>
 <thead>
 {jsArray.map((item, idx) =>
 idx === 0? (
 <th key={idx}>
  {Object.values(item).forEach((val) => (
  <td>{val}</td>
  ))}
 </th>
 ): (
 <tr key={idx}>
  {Object.values(item).forEach((val) => (
  <td>{val}</td>
  ))}
 </tr>
 )
 )}
 </thead>
 </table>
 )}

Wenn ich diesen Code ausführe, wird nichts gerendert. <tr key={idx}>{Object.values(item).forEach((val)=> (<td>{val}</td>))}</tr>Wenn ich durch ersetze null, sehe ich in meiner Ausgabe null in meinem Frontend gedruckt. Bitte lassen Sie mich wissen, wo ich falsch liege.

Lösung des Problems

Sie können es so machen:

 const data = JSON.parse(jsArray);
 const keys = Object.keys(data.length? data[0]: {});
 return (
 <div className="App">
 {jsArray.length > 0 && (
 <table>
 <thead>
 <tr>
 {keys.map((item, idx) => (
 <th key={idx}>{item}</th>
 ))}
 </tr>
 </thead>
 <tbody>
 {data.map((item, idx) => (
 <tr key={idx}>
 {keys.map((key, idx) => (
  <td>{item[key]}</td>
 ))}
 </tr>
 ))}
 </tbody>
 </table>
 )}
 </div>
 );