CODEWITHSUNDEEP
reactjstypescripttypes
Tomasz Waszczyk
Tomasz Waszczyk

Reputation: 3159

Child' cannot be used as a JSX component

I try to implement keeping URL parameters in path and I have such function:

function Child({ name }: { name: string }) {
  //display review information
  if (name === 'review-information') {
    return <></>;
  }

  //display summary tab
  if (name === 'summary') {
    return <></>;
  }
}

This is a way how I call the function:

<Child name={query.get('name') as string} />

But I got error like this one:

enter image description here

Its return type 'Element|undefined' is not a valid JSX element.

How to solve it?

Upvotes: 0

Views: 635

Answers (2)

Tomasz Waszczyk
Tomasz Waszczyk

Reputation: 3159

I was missing else in the loop:

function Child({ name }: { name: string }) {
  //display review information
  if (name === 'review-information') {
    return <></>;
  }

  //display summary tab
  if (name === 'summary') {
    return <></>;
  } else {
    return null;
  }
}

Upvotes: 0

OliverRadini
OliverRadini

Reputation: 6466

You have code paths which do not return values. You can either be more specific on the type, or always return some value:

function Child({ name }: { name: string }) {
  //display review information
  if (name === 'review-information') {
    return <></>;
  }

  //display summary tab
  if (name === 'summary') {
    return <></>;
  }

  return <p>Some sort of return value here</p>
}

or...

function Child({ name }: { name: 'review-information' | 'summary' }) {
  //display review information
  if (name === 'review-information') {
    return <></>;
  }


  // ts knows that name must equal 'summary' now
  return <></>;
}

Upvotes: 1

Related Questions