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;

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>