Блог

Я использую ChakraUI и React для создания проекта, в котором я хочу показать список участников в виде карточек. Но по какой-то причине компонент не отображается должным образом. В браузере отображается только текст участника команды. Но часть, в которой я сопоставил массив listOfTeamMembers, не отображается. В чем причина этого?

Компонент-член

 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;
 

Массив-член

 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;
 

Мой App.js компонент

 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;
 

Вы array item также должны вернуть 🙂

 {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>
            );
          })}

 

Вот демонстрация: https://codesandbox.io/s/sharp-ganguly-lcj38?file=/src/App.js:1122-1694