CODEWITHSUNDEEP
reactjstypescriptmerntsx
Karan Sharma
Karan Sharma

Reputation: 156

Type 'Error' is not assignable to type 'ReactNode'

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;

Upvotes: 1

Views: 6986

Answers (1)

linusw
linusw

Reputation: 1310

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>}

Upvotes: 1

Related Questions