Question 213310 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – getting error in react js while rendering component?

I am getting below error while rendering the component from an object.

ype 'FC<Boxprops> | ExoticComponent<{ children?: ReactNode; }>' is not assignable to type 'FC<Boxprops>'.
  Type 'ExoticComponent<{ children?: ReactNode; }>' is not assignable to type 'FunctionComponent<Boxprops>'.

I am trying to render component on the basis of object key

import "./styles.css";
import { BOX, Boxprops } from './box'
import React from "react";
let obj = {
  component:'box'
}
export default function App() {

  const getComponnets = () => {
    let Component: React.FC<Boxprops> = obj.component === 'box' ? BOX : React.Fragment

    return <Component title="asd" />
  }
  return (
    <div className="App">
      {getComponnets()}
    </div>
  );
}

Here is my code
https://codesandbox.io/s/naughty-fermat-szgggm?file=/src/App.tsx

ett

any idea.. ??

Tags:

2

Answers


  1. 0

    I think Box component and React.Fragment component are different component types. You have to match Fragment component to BoxProps as like Box component does.

    Try this code

    let Component: React.FC<Boxprops> = obj.component === 'box' ? BOX : () => <React.Fragment />;
    Login or Signup to reply.
  2. 0

    It’s right there in the screenshot what type is expected. Do try what intellisense has inferred.

    enter image description here

    import "./styles.css";
import { BOX, Boxprops } from "./box";
import React from "react";

let obj = {
  component: "box"
};

type IComponent =
  | React.FC<Boxprops>
  | React.ExoticComponent<{
      children?: React.ReactNode;
    }>;

export default function App() {
  const Component: IComponent = React.useMemo(
    () => (obj.component === "box" ? BOX : React.Fragment),
    []
  );

  return (
    <div className="App">
      <Component title="asd" />
    </div>
  );
}

    Edit getting-error-in-react-js-while-rendering-component

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search