React JS rendering nothing in .map-CodePudding

In the other component the following code is working fine and rendering fine but the below code is rendering nothing, just empty.

import {
  CTable,
  CTableBody,
  CTableHead,
  CTableHeaderCell,
  CTableRow,
} from "@coreui/react";
import React from "react";
import ListItem from "./ListItem";

function Postlists(props) {
  return (
    <div>
      <CTable>
        <CTableHead>
          <CTableRow>
            <CTableHeaderCell>Id</CTableHeaderCell>
            <CTableHeaderCell>Post Name</CTableHeaderCell>
            <CTableHeaderCell>Actions</CTableHeaderCell>
          </CTableRow>
        </CTableHead>
        <CTableBody>
          {props.postsListAdmin.map((data) => {
                console.log(data) //displaying data in console
                {data.name} //prints nothing  
          })}
        </CTableBody>
      </CTable>
    </div>
  );
}
export default Postlists;

The exact code is working in other place but here I'm getting nothing.

CodePudding user response：

That's because you aren't returning anything from the mapping function.

Try:

        <CTableBody>
          {props.postsListAdmin.map((data) => {
                console.log(data) //displaying data in console
                return data.name;
          })}
        </CTableBody>

CodePudding user response：

Map functions requires a return argument with it.

{props.postsListAdmin.map((data) => {
     return {data.name}  
})}

You can also use bracket here,

{props.postsListAdmin.map((data) => (
      console.log(data)
      {data.name}  
))}