I have 2 different components that contain sub-components within them. In one of these components, I'm trying to figure out how to transfer the click event from the sub-component to another component so that it can render an entirely new component for me.
I believe using the `useState` hook is the way to go, but I'm not sure where exactly to implement it in my code. I'll provide a snippet below to show what I've done so far, but I'm stuck on how to proceed:
app.jsx
import React, { useState } from 'react';
import './App.css';
import SignIn from './components/sign-in/SignIn';
import SignUpOptions from './components/sign-in/sign-up-select-business-option';
const [signUp, setSignUp] = useState(false);
const App = () => {
if (signUp) {
return <SignUpOptions/>
}
return <SignIn/>;
};
export default App;
signin.jsx
const SignIn = () => (
<div style={{display:'flex'}}>
<div style={{flex:2}}>
<ImageDiv bg={signin} src = {signin} alt="logo">
<LogoDiv src={logo} alt="logo" />
</ImageDiv>
</div>
<FormDiv>
<Input style={{marginTop: `${44}px`}} placeholder="Username" />
<Input style={{marginTop: `${44}px`}} placeholder="Password" />
<Button style={{marginTop: `${45}px`}}>Sign in</Button>
<ForgotPassword>Forgot username or password</ForgotPassword>
<SignUpParagraph>Don’t have an account? Sign up</SignUpParagraph>
</FormDiv>
</div>
)
export default SignIn;
So basically, when a certain action is triggered in the `SignIn` component, I want the `SignUpOptions` component in `app.jsx` to be loaded instead.