How to pass onClick function in sibling components using functional components?

Question

Here is the code link I want to implement the onClick function using sibling components.

I have two sibling components SignIn.js and SocialSignIn.js,

How could I implement them? Please help me.

Sandbox code editor link here

And also Code is here

 import { React } from "react"; // for Custom Email and Password Sign Up const SignIn =({handleSocial})=>{ return ( <> <h2> this is sign in usiging custom email & password</h2> {/* html form goes here */} <button onClick={handleSocial}>social sign in</button> </> ) } export default SignIn; import { React } from "react"; //for social auth sign up const SocialSignIn =()=>{ const handleSocial = ()=>{ console.log("hello social sign in") } return ( <> <h2> this is social sign in</h2> </> ) } export default SocialSignIn;

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

You do not trigger your onclick, here the working version https://codesandbox.io/embed/busy-tesla-x94ifr?fontsize=14&hidenavigation=1&theme=dark

Your App.js

import "./styles.css";
import SocialSignIn from "./components/SocialSignIn.js";
export default function App() {
  return (
    <div className="App">
      <SocialSignIn />
    </div>
  );
}

Signin.js

import { React } from "react";
const SignIn = ({ handleSocial }) => {
  const handleClick = () => {
    handleSocial();
  };

  return (
    <>
      <h2> this is sign in usiging custom email & password</h2>
      <button onClick={handleClick}>social sign in</button>
    </>
  );
};
export default SignIn;

SocialSignIn.js

import { React } from "react";
import SignIn from "./SignIn";
const SocialSignIn = () => {
  const handleSocial = () => {
    console.log("hello social sign in");
  };
  return (
    <>
      <h2> This is social sign in</h2>
      <SignIn handleSocial={handleSocial} />
    </>
  );
};
export default SocialSignIn;

Answer 2

It seems like you're trying to use the handleSocial method from the SocialSignIn component inside of the SignIn component. This won't quite work how you expect it to as handleSocial is scoped solely for use inside of SocialSignIn and SocialSignIn is just a react component.

What you could be doing instead is using SocialSignIn as a child component within the SignIn component.

So SignIn component will have 2 flows:

• email/password flow
• social sign in flow, which is only shown if the user clicks a button.

You can set this up as such:

 import { React } from "react"; // for Custom Email and Password Sign Up const SignIn =()=>{ const [showSocialLogin, setShowSocialLogin] = React.useState(false); return ( <> {;showSocialLogin && <div> <h2> this is sign in usiging custom email & password</h2> {/* html form goes here */} <button onClick={() => setShowSocialLogin(true)}>Click here for social login</button> </div> } {showSocialLogin && <SocialSignIn onCancel={() => setShowSocialLogin(false)} />} </> ) } export default SignIn; import { React } from "react". //for social auth sign up const SocialSignIn =({onCancel})=>{ return ( <> <h2> this is social sign in</h2> <button onClick={props;onCancel}>Go back to email/password</button> </> ) } export default SocialSignIn;

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>