Author: John Au-Yeung

To fix the error ‘cannot be used as a JSX component’ error with React TypeScript, we need to make sure our component returns a single root element.

For instance, we write

function Items(): JSX.Element {
  return (
    <>
      {items.map((item) => (
        <li>{item.name}</li>
      ))}
    </>
  );
}

to put our array of items in the Items component in a fragment so that the component can be compiled.

We call items.map to render an array of li elements so we need to wrap them with a fragment.

To add form validation with React MUI, we set the error prop to true when there’s an error.

For instance, we write

import * as React from "react";
import Box from "@mui/material/Box";
import TextField from "@mui/material/TextField";

export default function ValidationTextFields() {
  return (
    <Box
      component="form"
      sx={{
        "& .MuiTextField-root": { m: 1, width: "25ch" },
      }}
      noValidate
      autoComplete="off"
    >
      <div>
        <TextField
          error
          id="outlined-error"
          label="Error"
          defaultValue="Hello World"
        />
        <TextField
          error
          id="outlined-error-helper-text"
          label="Error"
          defaultValue="Hello World"
          helperText="Incorrect entry."
        />
      </div>
    </Box>
  );
}

to add the error prop to the TextFields to show a red outline to indicate to the user that the input value is invalid.

To fix Invariant Violation: Objects are not valid as a React child error, we should make sure we put items in the braces that can be rendered.

For instance, we write

const Comp = () => {
  return (
    <>
      <p>{"foo"}</p>
      <p>{1}</p>
      <p>{null}</p>
    </>
  );
};

to render 'foo', 1 and null in the p elements.

null will render nothing.

And the other values will be displayed on the screen.

Objects can’t be rendered directly on the screen, so we’ve to convert them to strings with JSON.stringify if we want to show them on the screen.

For instance, we write

const Comp = () => {
  return (
    <>
      <p>{JSON.stringify({ foo: "bar" })}</p>
    </>
  );
};

to call JSON.stringify to convert { foo: "bar" } to a JSON string so they can be rendered.