reactjs - React - cannot be used as a JSX component. Its return type 'void' is not a valid JSX element

Question

Closed. This question needs details or clarity. It is not currently accepting answers. question from:https://stackoverflow.com/questions/65832262/react-cannot-be-used-as-a-jsx-component-its-return-type-void-is-not-a-valid

Answer 1

You need to add parenthesis after return:

const CustomInput = ({children, value, onChange}: CustomInputProps) => {
  return (
    <div>
      <label htmlFor="search">{children}</label>
      <input id="search" type="text" value={value} onChange={onChange} />
    </div>
  )
}

https://stackblitz.com/edit/react-ts-pb6jpc?embed=1&file=index.tsx

---

If you are writing

const CustomInput = ({children, value, onChange}: CustomInputProps) => {
  return 
    <div>
      <label htmlFor="search">{children}</label>
      <input id="search" type="text" value={value} onChange={onChange} />
    </div>
}

this is transformed as

const CustomInput = ({children, value, onChange}: CustomInputProps) => {
  return;
    <div>
      <label htmlFor="search">{children}</label>
      <input id="search" type="text" value={value} onChange={onChange} />
    </div>
}

so you function basically returns undefined and is interpreted as

const CustomInput = ({children, value, onChange}: CustomInputProps) => {
  return undefined;
  // nothing after return counts
}