ReactJS is not rendering all the JSON elements properly

Question

RectJS is not rendering all the UI elements

I'm calling a web service that is returning the below response, this is quite straightforward. Here is the complete JSON dump

[
  {
    "id":1,
    "ami_info":{
      "id":0,
      "profile":"default",
      "account":"111111111",
      "region":"us-east-1",
      "ami_id":"ami-028222222",
      "name":"Test-AMI",
      "default_vpc_id":"vpc-17ba2222",
      "creation_date":"2021-08-09T18:01:08.000Z"
    },
    "instance_id":"id-e223114",
    "CommandOutputs":[
      {
        "Stdout":"Out",
        "Stderr":"Error",
        "ExitCode":1
      },
      {
        "Stdout":"Out",
        "Stderr":"Error",
        "ExitCode":1
      }
    ]
  }
]

Rendering root elements like id, instance_id is working fine.

However, It is not able to render CommandOutputs.Stdout or CommandOutputs.Stderr message in the HTML. the console.log has the values.

This is the gist of the logic

{
                            items.map((item, i) => {
                                let command_outputs = item.CommandOutputs
                                return (
                                    <tr>
                                        <td> {item.id}</td>
                                        <td>{item.instance_id}</td>
                                        <td>DONE</td>
                                        {
                                        command_outputs.map((c, j) => {
                                            <td>{c.Stdout}</td>
                                        })
                                        }
                                    </tr>
                                );
                            })
                        }

It just displays the root elements, not the nested child elements as shown in this image

Full Example Code

import React, {useState, useEffect} from 'react';
import {DashboardLayout} from '../components/Layout';
import {Table} from "react-bootstrap";
import {useParams} from "react-router-dom";



const ReportPage = () => {

    const {id} = useParams();

    function Loaddata() {
        const [error, setError] = useState(null);
        const [isLoaded, setIsLoaded] = useState(false);
        const [items, setItems] = useState([]);
        useEffect(() => {
            fetch("http://localhost:10000/getReportById/" + id)
                .then(res => res.json())
                .then(
                    (result) => {
                        setIsLoaded(true);
                        setItems(result);
                    },
                    (error) => {
                        setIsLoaded(true);
                        setError(error);
                    }
                )
        }, [])

        if (error) {
            return <div>Error: {error.message}</div>;
        } else if (!isLoaded) {
            return <div>Loading...</div>;
        } else {
            return (
                <div>
                    <Table striped bordered hover>
                        <thead>
                        <tr>
                            <th>id</th>
                            <th>Instance</th>
                            <th>STATUS</th>
                            <th>CommandOutputs</th>
                            <th>CommandOutputs</th>
                            <th>CommandOutputs</th>
                        </tr>
                        </thead>
                        <tbody>
                        {
                            items.map((item, i) => {
                                let command_outputs = item.CommandOutputs
                                return (
                                    <tr>
                                        <td> {item.id}</td>
                                        <td>{item.instance_id}</td>
                                        <td>DONE</td>
                                        {
                                        command_outputs.map((c, j) => {
                                            <td>{c.Stdout}</td>
                                        })
                                        }
                                    </tr>
                                );
                            })
                        }
                        </tbody>
                    </Table>
                </div>
            );
        }
    }

    return (
        <DashboardLayout>
            <h2> AMI Test Reports </h2>
            <Loaddata/>
        </DashboardLayout>
    )
}

export default ReportPage;

Answer 1

You should return the mapped elements. Don't forget your React keys.

Explicit return - function body with return statement

command_outputs.map((c, j) => {
  return <td key={j}>{c.Stdout}</td>;
})

Implicit return - no function body

command_outputs.map((c, j) => (
  <td key={j}>{c.Stdout}</td>
))