Type '() => string | JSX.Element' is not assignable to type 'FC<{}>'. E-CodePudding

I don't understand why I'm getting this error. I am new to typescript so I suspect that it has to do with typescript.

Here's my code.

Thanks for guidance.

const Pizzas: React.FC = () => {
  const classes = useStyles();

  const [pizzas, setPizzas] = React.useState()

  const {loading, error, data} = useQuery(GET_PIZZAS);

  if (loading) {
    return <div className={classes.skeleton}>Loading ...</div>;
  }

  if (error) return `Error! ${error.message}`;

  console.log("Data: "   data)

  return (
    <Container maxWidth="md">
      <PageHeader pageHeader={'Under construction'} />
      <img alt="under-construction" src="./codingcat.jpeg" />
    </Container>
  );
};

export default Pizzas;

CodePudding user response：

FC only expects a JSX.Element being returned, but you are returning a union type of string and JSX.Element. The reason why this union type is being inferred as such is due to this line:

if (error) return `Error! ${error.message}`;

Simply wrap it in a react fragment and you'll get ride of the string in the return type:

if (error) return <>Error! {error.message}</>;