How to pass a state from the child to app component

Question

I have 2 components which both have sub components, In one of the components if the sub component is clicked I want to transfer that to the app component so it renders a totally new Component for me

I want to use ```use state`` but where am I meant to start it. I will show code of what I started but blocked on how to continue

app.jsx

import React, { useState, useEffect } 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 in signin if I press i want the in app.jsx to load

so when they cclick on ssignUpPargrah you want to send them to signUp.jsx ? — Renaldo Balaj, Nov 28 '19 at 22:41
Possible duplicate of [ReactJS Two components communicating](https://stackoverflow.com/questions/21285923/reactjs-two-components-communicating) — Emile Bergeron, Nov 28 '19 at 22:42
Did you look at react-router? You wouldn't really pass state around, state is local to the component, or application state which is handled by state management libraries (though both are not a good fit for your current question, routing mechanisms probably are) — Icepickle, Nov 28 '19 at 22:43
Another [possible duplicate](https://stackoverflow.com/q/36143767/1218980) that might help (less generic, focused on 2 solutions) — Emile Bergeron, Nov 28 '19 at 22:43
Then, [how to navigate in React using react-router](https://stackoverflow.com/q/31079081/1218980) — Emile Bergeron, Nov 28 '19 at 22:45
did you try to pass the function "setSignUp" to the child component — phoenixstudio, Nov 28 '19 at 22:46

score 2 · Accepted Answer · edited Nov 28 '19 at 22:51

Since you are new, I won't give you a duplicate link

app.jsx

const [signUp, setSignUp] = useState(false);

const App = () => {
  if (signUp) {
    return <SignUpOptions/>
  }
    return <SignIn setSignUp={setSignUp}/>

};

signin.jsx

const SignIn = (props) => (
<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 setSignUp={props.setSignUp}>Don’t have an account? Sign up</SignUpParagraph>
  </FormDiv>

SignUpParagraph.js

const SignUpParagraph = (props) => (
<div onClick={()=>props.setSignUp(true)}>//anything you have in here </div>

Comment if it worked

However a duplicate link for duplicate questions is the correct behavior to avoid cluttering SO any more than it is. — Dave Newton, Nov 28 '19 at 23:00
Sorry guys, and yes did work and I thank you, and for next time Ill search more deeply for my answers — SImon Haddad, Nov 28 '19 at 23:14

score 0 · Answer 2 · answered Nov 29 '19 at 01:05

Although you already found an answer I can still give you another method on your way.

With React Context you could make functions in you index/app.js and call them with you child component. This is an lightweight alternative which works very well, aswell with hooks.

Greetings

How to pass a state from the child to app component

2 Answers2