title: how do a set a boolean value to false from one react component to main app.js
body: <p>trying to use the handle submit function to change the isAuthinticated to true from false thats on the main app.js file thats using react router.. all of the redux examples i look at are all using an app js file that has the onclick function on it not react router. thank you if you can help</p>
  <pre class="lang-js prettyprint-override"><code>function App () {
      return (
        &lt;Router&gt;
        &lt;div&gt;
          &lt;Switch&gt;
            &lt;Route exact path=&quot;/&quot; component={Login} /&gt;
            &lt;Route exact path=&quot;/login&quot; component={Login} /&gt;
            &lt;Route exact path=&quot;/signup&quot; component={Signup} /&gt;
            &lt;PrivateRoute 
            exact path=&quot;/mainpage&quot; 
            component={MainPage} 
            isAuthenticated={false}
            /&gt;
          &lt;/Switch&gt;
        &lt;Footer /&gt;
        &lt;/div&gt;
      &lt;/Router&gt;
      );
    }
  export default App;
  </code></pre>
  <p>my login.js that has the click event</p>
  <pre class="lang-js prettyprint-override"><code>const Login = () =&gt; {
    const history = useHistory()
    const [state, setState] = useState({
      email: '',
      password: ''
     });
    
    const [validate, setValid] = useState({
     validateEmail: '',
     validatePassword: '', 
    }) 
    
    
  const handleInputChange = event =&gt; setState({
      ...state,
      [event.target.name]: event.target.value,
    })
  
    const handleSubmit = user =&gt; {
      if(state.password === ''){
       setValid({validatePassword:true})
      }
      if(state.email === '' ){
       setValid({validateEmail:true})
      }
  
      axios.post(`auth/login`, state )
      .then(res =&gt; {
        console.log(res);
        console.log(res.data);  
        if (res.status === 200 ) {
          history.push('/mainpage');
        }  
      })
      .catch(function (error) {
        console.log(error);
        alert('Wrong username or password')
        window.location.reload();
      });
    }
  
  
    // console.log('state', state)
    const {email, password } = state
  
    const [popoverOpen, setPopoverOpen] = useState(false);
  
    const toggle = () =&gt; setPopoverOpen(!popoverOpen);
   
      return (
      &lt;&gt;
        &lt;Container&gt;
          &lt;Row&gt;
            &lt;Col&gt;
            &lt;img src={logo} alt=&quot;Logo&quot; id=&quot;logo&quot; /&gt; 
              &lt;Button id=&quot;Popover1&quot; type=&quot;button&quot;&gt;
                 About Crypto-Tracker
              &lt;/Button&gt;
            &lt;Popover placement=&quot;bottom&quot; isOpen={popoverOpen} target=&quot;Popover1&quot; toggle={toggle}&gt;
              &lt;PopoverHeader&gt;About&lt;/PopoverHeader&gt;
              &lt;PopoverBody&gt;Your personalized finance app to track all potential cryptocurrency investments&lt;/PopoverBody&gt;
            &lt;/Popover&gt;
            &lt;/Col&gt;
            &lt;Col sm=&quot;2&quot; id=&quot;home&quot; style={{height: 500}}&gt;
              &lt;Card body className=&quot;login-card&quot;&gt;
                &lt;Form className=&quot;login-form&quot;&gt;
                  &lt;h2 className=&quot;text-center&quot;&gt;Welcome&lt;/h2&gt;
                  &lt;h3 className=&quot;text-center&quot;&gt;____________&lt;/h3&gt;
                  &lt;FormGroup&gt;
                    &lt;Label for=&quot;exampleEmail&quot;&gt;Email&lt;/Label&gt;
                    &lt;Input invalid={validate.validateEmail}  onChange = {handleInputChange} value = {email} type=&quot;email&quot;  required name=&quot;email&quot; placeholder=&quot;email&quot; /&gt;
                    &lt;FormFeedback&gt;Please enter email&lt;/FormFeedback&gt;
                  &lt;/FormGroup&gt;
                  &lt;FormGroup&gt;
                    &lt;Label for=&quot;examplePassword&quot;&gt;Password&lt;/Label&gt;
                    &lt;Input invalid={validate.validatePassword}   onChange = {handleInputChange} value = {password} type=&quot;password&quot; required name=&quot;password&quot; placeholder=&quot;password&quot;/&gt;
                    &lt;FormFeedback&gt;Please enter password&lt;/FormFeedback&gt;
                  &lt;/FormGroup&gt;
                  &lt;Button  onClick={()=&gt; handleSubmit(state)} className=&quot;but-lg btn-dark btn-block&quot;&gt;Login&lt;/Button&gt;
                  &lt;div className=&quot;text-center pt-3&quot;&gt; or sign in with Google account&lt;/div&gt;
                  &lt;Loginbutton /&gt;
                  &lt;div className=&quot;text-center&quot;&gt;
                    &lt;a href=&quot;/signup&quot;&gt; Sign up&lt;/a&gt;
                    &lt;span className=&quot;p-2&quot;&gt;|&lt;/span&gt;
                    &lt;a href=&quot;/ForgotPw&quot;&gt;Forgot password&lt;/a&gt;
                  &lt;/div&gt;
                &lt;/Form&gt;
              &lt;/Card&gt;
            &lt;/Col&gt;
          &lt;/Row&gt;
        &lt;/Container&gt;
      &lt;/&gt;
      );
    }
  
  export default Login;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/CJ9fz.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CJ9fz.jpg" alt="code" /></a></p>
  <p>authslice.js using asyncthunk</p>
  <pre><code>import { createAsyncThunk, createSlice } from '@reduxjs/toolkit'
  import { userAPI } from '../../../server/routes/authRoutes'
  
  const fetchAuth = createAsyncThunk(
      'auth/login',
      async (userId, thunkAPI) =&gt; {
        const response = await userAPI.fetchById(userId)
        return response.data
      }
    )
  
    const authSlice = createSlice({
      name: 'isAuthenticated',
      initialState: {
        value: false,
      },
      reducers: {
      //   Authenticated: state =&gt; {
          // Redux Toolkit allows us to write &quot;mutating&quot; logic in reducers. It
          // doesn't actually mutate the state because it uses the Immer library,
          // which detects changes to a &quot;draft state&quot; and produces a brand new
          // immutable state based off those changes
          // state.value = true;
      //   },
      },
      extraReducers: {
          [fetchAuth.fulfilled]: state  =&gt; {
              // Add user to the state array
                  state.value = true
            },
          [fetchAuth.rejected]: state =&gt; {
              // Add user to the state array
              state.value = false
          }
      }
    });
  
    dispatch(fetchUserById(123))
    
  //   export const { increment, decrement, incrementByAmount } = counterSlice.actions;
  </code></pre>