Why props is not being passed by history.push?

SignIn.js I am redirecting the page using history.push but with it i am also passing the “username” but this username i am not able to see it in the redirected page “ADMIN.JS”.Since the username user enter that username i want to see it in the redirected page. All other content in admin.js are visible but only {username} is not visible.

  import withRoot from './modules/withRoot';
// --- Post bootstrap -----
import React, { useState } from 'react';
import history from './history';
import { makeStyles } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
import Link from '@material-ui/core/Link';
import { FormGroup, FormControl, ControlLabel } from "react-bootstrap";
import { Field } from 'react-final-form';
import Typography from './modules/components/Typography';
import AppFooter from './modules/views/AppFooter';
import AppAppBar from './modules/views/AppAppBar';
import Axios from 'axios';
import AppForm from './modules/views/AppForm';
import Button from '@material-ui/core/Button';
import { Alert } from 'react-bootstrap';
import { email, required } from './modules/form/validation';
import RFTextField from './modules/form/RFTextField';
import FormButton from './modules/form/FormButton';
import FormFeedback from './modules/form/FormFeedback';
import TextField from '@material-ui/core/TextField';
import Home from './Home';
import Dashb from './Dashb';



const useStyles = makeStyles((theme) => ({
  form: {
    marginTop: theme.spacing(6),
  },
  button: {
    marginTop: theme.spacing(3),
    marginBottom: theme.spacing(2),
  },
  feedback: {
    marginTop: theme.spacing(2),
  },
}));

const SignIn = (props) => {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [status, setStatus] = useState(true);
  const classes = useStyles();
  let demo;
  function validateForm() {
    if(username.length==3 && password.length==6 )
    return 1;
    
  }

  function setIncorrect() {
    setStatus(false);
  }



  function setCorrect() {
    setStatus(true);
  }


 


  const handleSubmit = (event) => {
    event.preventDefault()
  
    let user =  Axios.get(
      'http://localhost:9000/admin-service/admin/check/' +
        username +
        '/' +
        password
    )
      .then(response => {
        demo = response.data
        if (demo == true) {
          props.history.push({
            pathname: '/admin',
            username
          });
          console.log('####')
          
        } else{
          console.log('not true')
          Functions();
      }
      })
      .catch(error => {
        console.log(error.response.data)
        setIncorrect()
      })
  };

  function Functions() {
    alert("PLEASE ENTER CORRECT CREDENTIALS!!!!!!!!!!")
}

  return (
    <React.Fragment>
      <AppAppBar />
      <AppForm>
        <React.Fragment>
          <Typography variant="h3" gutterBottom marked="center" align="center">
            Admin Sign In
          </Typography>
        </React.Fragment>

        <form onSubmit={handleSubmit} className={classes.form} noValidate>
          <TextField
            variant="outlined"
            margin="normal"
            required
            fullWidth
            id="username"
            label="Admin-Id"
            name="username"
            autoFocus
            onChange={e => { setUsername(e.target.value); setCorrect() }}
          />
          <TextField
            variant="outlined"
            margin="normal"
            required
            fullWidth
            name="password"
            label="Password"
            type="password"
            id="password"
            autoComplete="current-password"
            onChange={e => { setPassword(e.target.value); setCorrect() }}
          />
          {(!status) && <Alert severity="error">Incorrect credentials. Please try again</Alert>}

          <FormButton
            type="submit"
            className={classes.button}
            disabled={!validateForm()}
            size="large"
            color="secondary"
            fullWidth
          >
            Sign In
              </FormButton>
        </form>
        


        <Typography align="center">
          <Link underline="always" href="/premium-themes/onepirate/forgot-password/">
            Forgot password?
          </Link>
          <p>NOTE-PASSWORD IS YOUR USER PIN</p>
        </Typography>
      </AppForm>
      

    </React.Fragment>


  );
}

export default SignIn;

Admin.js

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Home from './Home.js';
import { Button } from 'react-bootstrap';



const Admin = props => {
  const { username } =
    (props.location && props.location.state) || {};
  return (
    <div>
      <br/>
      <br/>
        <h2> Username </h2> {username}
        <h1>child component-MILAN</h1>
      </div>
  );
}
export default Admin;

Answer

As you can read in getting-started:

Pass the state:

history.push({
  pathname: '/admin',
  state: {
    username: username
  }
});

and read from the state:

const username = history.location.state?.username

Advertisement

Answer