CODEWITHSUNDEEP
javascriptreactjsroutesrouteparams
Mayank Purohit
Mayank Purohit

Reputation: 193

How to transfer data from one parent component to another parent component in react using router / router params

I am new to react application development i am sending listing my code over here to get the solution there are different files

right now i have 1 index.html and one app.js and index.js and login.js and product.js

my app.js have routing implemented into it and index.js have browser router in it and login js have axios api call and plain login application and by successful login i am moving to another page i.e product.js

so listing my files

1) App.js

import React from 'react';
import { Switch, Route } from 'react-router-dom'
import Product from './components/product';
import Coal from './components/coal';
import Summary from './components/summary';
import Login from './components/login';

class App extends React.Component {
  render() {
    return (
      <Switch>
        <Route exact path = '/' component = {Login} />
        <Route path = "/product" component = {Product} />
        <Route path = "/coal" component = {Coal} />
        <Route path = "/summary" component = {Summary} />
      </Switch>

    );
  }
}

export default App;

2) Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter} from 'react-router-dom';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import './index.css';
import App from './App';
import Login from './components/login';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<BrowserRouter historty = {this.historty}>
    <Login/>
</BrowserRouter>, document.getElementById('root'));
registerServiceWorker();

3) Login.js

import React from 'react'
import axios from 'axios';

class Login extends React.Component  {
constructor(props) {
    super(props)
    this.state = ({
        admin_id : '',
        password : '',
    });

    this.handlePassword = this.handlePassword.bind(this);
    this.handleUserName  =this.handleUserName.bind(this);
    this.loginUp = this.loginUp.bind(this);
}

handleUserName(e) {
    e.preventDefault();
    this.setState({admin_id: e.target.value})
}

handlePassword(e) {
    e.preventDefault();
    this.setState({password: e.target.value})
}

componentDidMount() {
}

loginUp() {

    let userDetails = {
        admin_id: this.state.admin_id,
        password: this.state.password
    }
    if(this.state.admin_id === '' && this.state.password === '') {
        alert('please enter fields');
    } else {
      axios.post("http://103.10.191.145:1337/sapl/admin/login", userDetails , this.axiosConfig)
      .then((res) => {
        if(res.data === 'Admin login successfully'){
            this.setState({userName : userDetails.admin_id})
            this.props.history.push('/product');        
        } else {
            alert('we are not in success');
        }
      })
      .catch((err) => {
          console.log('axios error' , err);
      })
    }
  }


render() {
return(
  <div className = "container">
    <div className ="row">
        <div className = "col-md-12">
            <h3>Login</h3>
            <input className="form-control" type="text" placeholder="EmailID" value = {this.state.admin_id}  onChange = {this.handleUserName} />
            <input className="form-control" type="password" placeholder="password" value = {this.state.password} onChange={this.handlePassword} />
            <button className="btn btn-primary" type="button" onClick={() => this.loginUp()}> Login</button>
        </div>
    </div>
  </div>
    )   
  }
}

export default Login

4) product.js

import React from 'react';

class Product extends React.Component {
    constructor(props){
        super(props);

    }

    coalOption() {

        this.props.history.push('/coal');
    }

    componentDidMount() {
        var usname   = this.state;
        console.log('usen' , usname);
    }

    render() {
        return(
            <div className = 'container'>
                <div className = 'row'>
                    <div className = 'col-md-12'>
                    <h3>Welcome the username</h3>
                    <button className="btn btn-primary" type="button" onClick={() => this.coalOption()}>coal</button>
                    </div>
                </div>
            </div>

        )
    }
}

export default Product

so i want to get the username into my product .js and print that into html tag please can someone help i want to show case PoC

Upvotes: 0

Views: 114

Answers (1)

Sakhi Mansoor
Sakhi Mansoor

Reputation: 8102

You can pass variable with history.push

this.props.history.push({
 pathname: '/product',
  userDetails: userDetails,
})

and access them in product component be like:

this.props.location.userDetails

I hope this would be much helpful.

Upvotes: 3

Related Questions