Props to table details

Question

I have a json of the fomat

{
    description : "Meeting Description"
    name : "Meeting name"
    owner : {
        name: "Creator Name",
        email: "Creator Name"
    }
}

I need to display details in this format using table

Meeting Name : Meeting name
Description  : Meeting name
Creator Name : Creator Name
Creator Email: Creator Name

This is the code I have used. I have used spread operator to get the details from the inner json.

function DisplayDetails(props) {
    return (
        <table style={{ padding: "10px" }}>
            <tbody>
                <tr>
                    <td>Meeting Name</td>
                    <th>:&nbsp;{props.name}</th>
                </tr>
                <tr>
                    <td>Description</td>
                    <th>:&nbsp;{props.description}</th>
                </tr>
                <DisplayOwner {...props.owner} />

            </tbody>
        </table>
    )
}

function DisplayOwner(props) {
    return (
        <div>
            <tr>
                <td>Creator Name:</td>
                <td>{props.name}</td>
            </tr>
            <tr>
                <td>Creator Email:</td>
                <td>{props.email}</td>
            </tr>
        </div>
    )
}

This code shows me warning of

validateDOMNesting(...): <tr> cannot appear as a child of <div>.

Is there any better approach as I am new to react.

Answer 1

Working example: https://codesandbox.io/s/4qjq5z7w87

index.js

import React from "react";
import ReactDOM from "react-dom";
import DisplayDetails from "./displayDetails";
import "./styles.css";

const data = {
  description: "Meeting Description",
  name: "Meeting Name",
  owner: {
    name: "Creator Name",
    email: "Creator Email"
  }
};

const App = () => (
  <div className="App">
    <h1>Display Details</h1>
    <DisplayDetails {...data} />
  </div>
);

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

displayDetails.js

import React from "react";
import DisplayOwner from "./displayOwner";

export default ({ description, name, owner }) => (
  <table style={{ padding: "10px" }}>
    <tbody>
      <tr>
        <td>Meeting Name:</td>
        <th>{name}</th>
      </tr>
      <tr>
        <td>Description:</td>
        <th>{description}</th>
      </tr>
      <DisplayOwner {...owner} />
    </tbody>
  </table>
);

displayOwner.js

import React, { Fragment } from "react";

export default ({ email, name }) => (
  <Fragment>
    <tr>
      <td>Creator Name:</td>
      <td>{name}</td>
    </tr>
    <tr>
      <td>Creator Email:</td>
      <td>{email}</td>
    </tr>
  </Fragment>
);

Answer 2

Update to the following, use fragments, https://reactjs.org/docs/fragments.html#short-syntax https://reactjs.org/docs/fragments.html

import React from 'react';

...

function DisplayOwner(props) {
    return (
        <React.Fragment>
            <tr>
                <td>Creator Name:</td>
                <td>{props.name}</td>
            </tr>
            <tr>
                <td>Creator Email:</td>
                <td>{props.email}</td>
            </tr>
        </React.Fragment>
    )
}