how to pass the variable from loginform to app.js on the below criteria and move to the next screen when it is true using react js

Question

how to pass the variable "devscreens" from loginform to app.js on the below criteria and move to the next screen in react js.

Loginform.js:

async doLogin(){
        this.setState({invalid_user:false});
        this.setState({welcome_user:false});
        this.setState({devscreens:false});
        if (!this.state.username){
            return;
        }
        
        this.setState({
            buttonDisabled: true
        })
        try{
        const response = await axios.get(`${loginidURL}`)

        if(response.status === 200)
        {   this.setState({welcome_user:true});
            console.log(response.data.username)
            console.log(response.data)
            console.log(response.data.userlevel)
            if (response.data.userlevel == 11 )
            {
                this.setState({devscreens:true});
                
                console.log(this.state.devscreens)
                
            }
            if (response.data.userlevel == 13 )
            {
               this.setState({devscreens:false});
            }
            userid=response.data.username
            this.resetForm();
        }
    }

App.js:

function App() {
  const classes = useStyles();
  
  return (
    <ThemeProvider theme={theme}>
      <div className="app">
                  <div className='container'>  
                  <h1>Application </h1>
                  <h3>App</h3>
                    <LoginForm/>
                  </div>
                  </div>
         <div className={classes.appMain}>
               <Header />
        <Welcome username=""/>
        <Board />
      </div> 

I am new to react working in logic screen and its next screen integration. Wanted to pass the devscreen value from Loginform.js to App.js. and if devscreen is true then i need to execute the below in app.js in an separate screen.

           <Header />
        <Welcome username="Jo"/>
        <Board />
      </div> 

Can some one help me with this.I tried using props but that did not work for me..

Answer 1

A common flow in React is that the App.js component contains all other components and logic within it. So the component is a container for all other components.

The logic is to then decide which child components to render depending on the state of parent components. You can pass objects to child components using props, which then help decide which pieces to render.

Please have a look through the examples here: https://reactjs.org/tutorial/tutorial.html