CODEWITHSUNDEEP
javascriptreactjsreact-hooks
undefined
undefined

Reputation: 441

What is the correct way of exporting Hooks function as a component in react?

I am new to Hooks and would like to understand better how to do things the right way. I am trying to separate my component into a Home and SignIn. Simple example:

Home.js

 import {SignIn} from './SignIn';

 export const Home = () => {
    return (
       <div>
          <SignIn />
       </div>
    )
 }

SignIn.js

 export const SignIn = () => {
   //sign in functionality
  return (
     //sign in forms
   )
  }

with this format it works but on the console I'm having error:

  Functions are not valid as a React child. This may happen if you return a Component instead of 
  <Component /> from render. Or maybe you meant to call this function rather than return it.
  
  in SignIn (at Home.js:26)

What would be the correct way of exporting Hooks to be a valid react child?

Upvotes: 0

Views: 68

Answers (2)

Liu Lei
Liu Lei

Reputation: 1297

if u do that. u'll got this "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."

const method = () => {}

...
return (
    <div>
      {method}
    </div>
  );

changed

const method = () => {}

...
return (
    <div>
      {method()}
    </div>
  );

in your SignIn.js

export const SignIn = () => {
  return (
   // the problem is here
   // do like that {method()}
  );
};

============UPDATE==============

SignIn.js

import React from 'react'

export const SignIn = () => {
  return <div>SignIn</div>
}

Home.js

import React from 'react';
import {SignIn} from './SignIn';

export const Home = () => {
    return (
       <div>
          <SignIn />
       </div>
    )
 }

Upvotes: 1

Tran Loc
Tran Loc

Reputation: 451

You have to make React recognize that it is a component by doing so In your SignIn.js and your Home.js:

import React from "react";

Updated, try this:

export const SignIn = () => {
  return <div>SignIN</div>;
};

export const Home = () => {
  return <SignIn />;
};

Upvotes: 0

Related Questions