How to pass state from component to file app.js in React

October 13, 2021, at 02:10 AM

I have to pass my state from Authentication.js to App.js, to make certain functionalities available to registered users.

This is my file Authentication.js

import { useState } from "react"
import MyButton from "../componens/myButton"
import styles from "../style/authentication.module.css"
import Spinner from "../componens/Spinner"
import axios from "axios"
const Authentication = () =>{
const [email, setEmail] = useState("")
const [password, setPassword] = useState("")
const [loading, setLoading] = useState(false)
const [registration, setRegistration] = useState(true)
const [state, setState] = useState(null)
let MyRegistration = null;
const handleSubmit = async (e) =>{
    try {
        const userKey = `AIzaSyCYe1XVuJVflRie0sf1y01RNrmQ77Dmp4Q`
        let urlAPI = `${userKey}`
        if (!registration) {
            urlAPI = `${userKey}`
        MyRegistration = await,{
            email : email,
            password : password,
            returnSecureToken : true
        return MyRegistration
    } catch (error) {
    return <div className={styles.formContainer}>
        <form onSubmit={handleSubmit} action="">
            <input placeholder="Your email" type="email" value={email} onChange={handleEmail} />
            <input placeholder="Your Password" type="password" value={password} onChange={handlePassword} />
            {loading ? <Spinner/> :
            <MyButton  title={registration ? 'sign up' : 'Sign in'} handleClickButton={handleSubmit} />}
            <MyButton title={registration ? 'Go to Sign in' : 'Go to sign up'} handleClickButton={changeMode}/>
export default Authentication;

This is my file App.js

import Home from './pages/Home';
import Book from './pages/Book'
import {Route, Switch} from 'react-router-dom'; 
import SavedBooks from './pages/SavedBooks';
import Header from './componens/Header';
import BookChapter from './pages/BookChapter';
import Authentication from './pages/Authentication';
import {useState} from "react";
function App(props) {
const [userData,  setUserData] = useState("");
  return (
        <Route exact path="/" render={(props) => <Home userData={userData}/>}/>
        <Route exact path="/book/:id" component={Book}/>
        <Route exact path="/savedbooks" component={SavedBooks}/>
        <Route exact path="/book/:id/chapter/:numero" component={BookChapter}/>
        <Route exact path="/authentication" render={(props) => <Authentication setUserData={setUserData(this.state)}/> }/>
export default App;

But the response is: TypeError: Cannot read properties of undefined (reading 'state')

Answer 1

You cannot pass the state declared in Authentication.js to its parent App.js . So, you need to make a useState in App.js and pass the state and its corresponding setterFunction onto the child i.e Authentication.js. This is known as lifting up the state.

Move const [state, setState] = useState(null) to App.js and use the state variable in App.js and pass it onto child like this

<Route exact path="/authentication" render={(props) => <Authentication state={state} setState={setState}/> }/>



Want to improve this question? Add details and clarify the problem by editing this post

Getting radio input from selection in table

Getting radio input from selection in table

enter code heresorry I should have included this firstthis is a snip of the csv file I'm trying to get my code to open a page that displays a picture of the model and displays information

how to change root color using tkinter with a button command

how to change root color using tkinter with a button command

the main problem is here with this part of the code:

Problem on Safari - Hide Header on Scroll Down &amp; Show on Scroll Up

Problem on Safari - Hide Header on Scroll Down & Show on Scroll Up

It works on Chrome and other browsers but does not work on Safari