I am getting the error when i am passing the error to the message component.

Type 'Error' is not assignable to type 'ReactNode'.ts(2322)

Message.tsx(6, 3): The expected type comes from property 'children' which is declared here on type 'IntrinsicAttributes & Pick<Props, "children"> & InexactPartial<Pick<Props, "variant">> & InexactPartial<Pick<{ variant: string; }, never>>'

loginScreen.tsx

return (
<FormContainer>
  <h1>Sign In</h1>
  {error && <Message variant="danger">{error} //this one is giving the error </Message>}
  {loading && <Loader />}
  <Form onSubmit={submitHandler}>
    <Form.Group controlId="email">
      <Form.Label>Email Address</Form.Label>
      <Form.Control
        type="email"
        placeholder="Enter email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      ></Form.Control>
    </Form.Group>
    <Form.Group controlId="password">
      <Form.Label>Password</Form.Label>
      <Form.Control
        type="password"
        placeholder="Enter password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      ></Form.Control>
    </Form.Group>
    <Button type="submit" variant="primary">
      Sign in
    </Button>
  </Form>
  <Row className="py-3">
    <Col>
      New Customer?{" "}
      <Link to={redirect ? `/register?redirect=${redirect}` : "/register"}>
        Register
      </Link>
    </Col>
  </Row>
</FormContainer>

Message.tsx

import { Alert } from "react-bootstrap";

interface Props {
  variant: string;
  children: ReactNode;
}

const Message = ({ variant, children }: Props) => {
  return (
    <Alert variant={variant}>
      {children}
    </Alert>
  );
};

Message.defaultProps = {
  variant: "info",
};

export default Message;

CodePudding user response：

react expects "error" to be string or element. since it is instance of Error type it can't be rendered. Most likely there is an error message inside it. Try like this.

<Component>{error.message}</Component>}