Typescript error in react - Type 'Element[]' is missing the following properties from type-CodePudding

In App.tsx, if you hover the <Accordion/>, you will see the error below.

'Accordion' cannot be used as a JSX component.
  Its return type 'Element[]' is not a valid JSX element.
    Type 'Element[]' is missing the following properties from type 'ReactElement<any, any>': type, props, keyts(2786)

How can I fix this problem?

App.tsx

import "./styles.css";

import Accordion from "./Accordion";

export default function App() {
  const items = [
    { id: 1, title: "title 1", description: "description 1" },
    { id: 2, title: "title 2", description: "description 2" }
  ];
  return (
    <div className="App">
      <Accordion items={items} />
    </div>
  );
}

Accordion.tsx

import React from "react";
import {
  Accordion,
  AccordionItem,
  AccordionButton,
  AccordionPanel,
  AccordionIcon,
  Box
} from "@chakra-ui/react";

type AccordionProps = {
  items: Array<{ id: number; title: string; description: string }>;
};

export default function AccordionList({ items }: AccordionProps) {
  return items.map((item) => {
    return (
      <Accordion defaultIndex={[0]} allowMultiple>
        <AccordionItem>
          <AccordionButton>
            <Box flex="1" textAlign="left">
              {item.title}
            </Box>
            <AccordionIcon />
          </AccordionButton>
          <AccordionPanel>{item.description}</AccordionPanel>
        </AccordionItem>
      </Accordion>
    );
  });
}

Codesandbox
https://codesandbox.io/s/determined-ives-lob9x?file=/src/Accordion.tsx:0-734

CodePudding user response：

You should map items inside the Accordion like this

export default function AccordionList({ items }: AccordionProps) {
  return (
    <Accordion defaultIndex={[0]} allowMultiple>
      {items.map((item) => (
        <AccordionItem>
          <AccordionButton>
            <Box flex="1" textAlign="left">
              {item.title}
            </Box>
            <AccordionIcon />
          </AccordionButton>
          <AccordionPanel>{item.description}</AccordionPanel>
        </AccordionItem>
      ))}
    </Accordion>
  );
}

Sanbox https://codesandbox.io/s/patient-bush-167ye?file=/src/Accordion.tsx:250-727

CodePudding user response：

import AccordionList from "./Accordion";

to import , need export

CodePudding user response：

import React from "react";
import {
Accordion,
AccordionItem,
AccordionButton,
AccordionPanel,
AccordionIcon,
Box
} from "@chakra-ui/react";

type AccordionProps = {
items: Array<{ id: number; title: string; description: string }>;
};

export default function AccordionList({ items }: AccordionProps) {
return(<> 
{items.map((item, idx) => {
return (
  <Accordion key = {idx} defaultIndex={[0]} allowMultiple>
    <AccordionItem>
      <AccordionButton>
        <Box flex="1" textAlign="left">
          {item.title}
        </Box>
        <AccordionIcon />
      </AccordionButton>
      <AccordionPanel>{item.description}</AccordionPanel>
    </AccordionItem>
  </Accordion>
);
})
}
</>);
}

Change your accordion code to the above one. You have encountered this error because you are sending more than one JSX element from a function. Wrapping it in a fragment is one of the solutions to address this issue.