React Instant Return Component (To fix 'Nothing was returned from render' error!)

I spent quite sometime trying to get a component working with the error message below as my guide: [code]Input(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.[/code] My standard component: [code language="javascript"] const Input = ({ placeholder, name, type, value, handleChange }) => { <input placeholder={placeholder} type={type} step="0.0001" value={value} onChange={(e) => handleChange(e, name)} className="my-2 w-full rounded-sm p-2 outline-none bg-transparent text-white border-none text-sm white-glassmorphism" /> }; [/code] I was following a tutorial online, and the instructor wrote out his code like this: [code language="javascript"] const Input = ({ placeholder, name, type, value, handleChange }) => ( <input placeholder={placeholder} type={type} step="0.0001" value={value} onChange={(e) => handleChange(e, name)} className="my-2 w-full rounded-sm p-2 outline-none bg-transparent text-white border-none text-sm white-glassmorphism" /> ); [/code] Can you spot the difference? The instructor's component is using parenthesis, while mine is using brackets (because, that's how I've always written components). There was no return statement in his code so I assumed that mine also did not need it. WRONG. Here's what I learned Looking back now, the error message is actually extremely clear on what the issue was. I was attempting to return a component, however, there is no return statement. Well, then why did the instructor's code work? It worked because the instructor's code is instantly returning the component, hence the '(' as the grouping symbol. Using parenthesis automatically returns the evaluation of the component hence no return statement is needed. Using Brackets however does not automatically return the component, therefore a return statement is needed, hence the error message that was being thrown. The below piece of code would work just fine, we are using parenthesis so there is no return statement needed. [code language="javascript"] const SampleComponent = () => ( Hello ); [/code] The below piece of code would NOT work, we are using brackets, so a return statement IS needed. [code language="javascript"] const SampleComponent = () => { Hello }; [/code] The correct syntax would look like this: [code language="javascript"] const SampleComponent = () => { return( Hello ) }; [/code] The component is wrapped in brackets, return statements are wrapped in parenthesis, make sure your returns are always wrapped in parenthesis.