React + TypeScript: How to fix "return type 'Element[]' is not a valid JSX element."?

user_15056025 0
Viewed 9151

How to resolve Error on TypeScript

I'm creating line chart from scratch, using React and TypeScirpt.
I found this video https://www.youtube.com/watch?v=PV2kFiVi5Ns, which shows the way to create line chart from scratch, using React and Javascript.

I tried to convert some codes to TypeScript from JavaScript.
Some Errors have occured, and I can't find the way to resolve these Errors.

How can I remove these Errors ?

'LabelsXAxis' 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, key  TS2786

  const LabelsXAxis = () => {
    const y = height - padding + FONT_SIZE * 2;

    return data.map((element, index) => {
      const x =
        (element.x / maximumXFromData) * chartWidth + padding - FONT_SIZE / 2;
      return (
        <text
          key={index}
          x={x}
          y={y}
          style={{
            fill: "#808080",
            fontSize: FONT_SIZE,
            fontFamily: "Helvetica"
          }}
        >
          {element.label}
        </text>
      );
    });
  };

typescript reactjs javascript
2 Answers
user_236490

data.map creates an array of elements, which cannot be used as an element. In this case, it may be suitable to wrap your data.map in a fragment as follows:

return <>{
  data.map(/*... Your code*/)
}</>
user_116449810
Related