Component should be returning a JSX.Element, but says it is not returning a value at all

Solution 1:

Your first example isn't returning anything. When you enclose the body of an arrow function in curly braces e.g. const myFunc = () => { ...body } you have to explicitly put a return inside. What you want is to omit the curly braces.

However, that will still not work, because you'll be returning an array rather than an element. You can use a React fragment, such as:

const NavigationItems = (props: {name: string, href: string}[]): JSX.Element => (
  <>
  props.map((item, index) => {
    return <a href={item.href} key={index}>{item.name}</a>
  })
  </>
);

I typed this on my phone so I hope that syntax is correct. But the <> indicates a fragment. You can read more here: https://reactjs.org/docs/fragments.html

Note that <>...</> is shorthand for <React.Fragment>...</React.Fragment>

Component should be returning a JSX.Element, but says it is not returning a value at all

Solution 1:

Related

Recent Posts