CODEWITHSUNDEEP
reactjstypescript
stackuser
stackuser

Reputation: 219

How to render a child component within parent component using react and typescript?

i want to conditionally render a child component within parent component using react and typescript.

below is my code,

const Parent = ({ prop1, prop2 }: { prop1: Prop1, prop2: Prop2;}) => {
    const isChecked = true;
    return (
        {isChecked && <ChildComponent />}
        <SomeotherComponent>
            //some jsx
        </SomeOtherComponent>
    );
 }

 const ChildComponent = () => {
     return (
         <>
             <div>something</div>
             <div>something</div>
         </>
     );
 }

the above code gives me error like below

Warning: Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it.

could someone help me fix this. thanks. i am new to using react and typescript.

Upvotes: 1

Views: 680

Answers (2)

Praya
Praya

Reputation: 99

try this:

const Parent = ({ prop1, prop2 }: { prop1: Prop1, prop2: Prop2;}) => {
  const isChecked = true;
  return (
    <>
      {isChecked && <ChildComponent />}
      <SomeotherComponent>
      //some jsx
      </SomeOtherComponent>
    </>
  );
}

Upvotes: 0

Taghi Khavari
Taghi Khavari

Reputation: 6582

Return statement of a react component only accept one jsx so you need to wrap your components

return (
  <>
    {isChecked && <ChildComponent />}
    <SomeotherComponent>//some jsx</SomeOtherComponent>
  </>
);

Upvotes: 1

Related Questions