Array Map method not rendering properly in React-CodePudding

I am using ChakraUI and React to make a project where I want to show a list of members in the form of cards. But for some reason the component is not rendering properly. Only the Team member text is showing in the browser. But the part where I mapped the listOfTeamMembers array, is not rendering. What is the reason behind it?

Member component

import { Box, Text, Center, Stack } from "@chakra-ui/layout";
import listOfTeamMembers from "./team-members-list";

function TeamMembers() {
  return (
    <Box id='team-members' mt={10}>
      <Box>
        <Center>
          <Text fontSize='4xl' as='u' fontFamily='sans-serif'>
            Team Members   //only this part is showing on website
          </Text>
        </Center>
        <Box>
          {listOfTeamMembers.map((items) => {
            <Stack
              spacing={{ base: "18px", md: "25px", lg: "40px" }}
              direction='row'
            >
              <Box
                w={{ base: "300px", md: "200px", lg: "100px" }}
                h={{ base: "300px", md: "200px", lg: "100px" }}
                borderRadius={5}
              >
                {items.name}
                {items.contact}
                {items.details}
              </Box>
            </Stack>;
          })}
        </Box>
      </Box>
    </Box>
  );
}

export default TeamMembers;

The member array

const listOfTeamMembers = [
  {
    name: "Dr. DoofenShmirtz",
    contact: "#",
    details:
      "The evil genius and a loving father of one daughter. Hate Perry the platipus",
  },
  {
    name: "Dr. Frankestein",
    contact: "#",
    details: "I experiment on Dead People",
  },
  {
    name: "Dr. Drake Ramoray",
    contact: "#",
    details: "Has magical hands. Can do brain Transplant without any Help",
  },
  {
    name: "Dr. House MD",
    contact: "#",
    details: "I am a fictional Character. What am I doing here!",
  },
  {
    name: "Dr. Hibbert",
    contact: "#",
    details: "ohhohohohohohoho",
  },
  {
    name: "Dr. Elmer Hartman",
    contact: "#",
    details: "My role as a doctor is to cure people. But I do the opposite.",
  },
];

export default listOfTeamMembers;

My App.js component

import { ChakraProvider } from "@chakra-ui/provider";
import { useState } from "react";
import Navbar from "../src/components/navbar";
import Home from "./components/Home";
import theme from "./theme";
import TeamMembers from "../src/components/Team Members/team-members";

function App() {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  return (
    <ChakraProvider theme={theme}>
      <Navbar isMenuOpen={isMenuOpen} setIsMenuOpen={setIsMenuOpen} />
      <Home isMenuOpen={isMenuOpen} />
      <TeamMembers />
    </ChakraProvider>
  );
}

export default App;

CodePudding user response：

You have to return array item also :-)

{listOfTeamMembers.map((items) => {
            return (
              <Stack
                spacing={{ base: "18px", md: "25px", lg: "40px" }}
                direction="row"
              >
                <Box
                  w={{ base: "300px", md: "200px", lg: "100px" }}
                  h={{ base: "300px", md: "200px", lg: "100px" }}
                  borderRadius={5}
                >
                  {items.name}
                  {items.contact}
                  {items.details}
                </Box>
              </Stack>
            );
          })}

Here is demo: https://codesandbox.io/s/sharp-ganguly-lcj38?file=/src/App.js:1122-1694