1

I am new to this.I am sorry if maybe this question are already in stack-overflow I cannot find-out perfect on answer for my question

From fist component i get a input set to state. Now i need to pass the value to second component and navigate to second component while on-click from the fist component. i already have navigation link. But I need to navigate while on-form submit and passing the data to navigating component

Note

The fist component and second component are Not Parent child component. These two component are individual independent component.

Kindly help to solve this

app.js

import React, { Component } from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import './App.css';
import Home from './components/Home';
import About from './components/About';
import Fist from './components/fist';
import Second from './components/Second';
import Navigation from './components/Navigation';
import Signup from './components/Signup';
import Signin from './components/Singin';

function App() {
return (
    <div className="App">
        <BrowserRouter>
            <div>

                <Navigation />
                <Switch>
                    <Route path="/" component={Home} exact />
                    <Route path="/Signin" component={Signin} />
                    <Route path="/Signup" component={Signup} />
                    <Route path="/fist" component={Fist} />
                    <Route path="/contact" component={Contact} />
                    <Route path="/Second" component={second} />


                </Switch>
            </div>
        </BrowserRouter>
    </div>
);
}

export default App;

Fist Class Component

import React, { Component } from 'react';

class Fist extends Component {

constructor(props) { super(props) ;}

  render() {
    return (
             <div>
            <input name="City" Placeholder="City" type="text" onChange={e => this.setState({ City: e.target.value }) }>
             <button class="loginbtn" type="submit" >Next </button>
           </div>
           );
           }
}
export default Fist;

Second Class component

 import React, { Component } from 'react';

 class Second extends Component {

constructor(props) {
    super(props);
    this.state = {
        city: this.props.match.params
    } 
}

render() {
    return (
        <div>
            <p> Code above </p>
            <p> {this.state.City}</p>
            <p> code below</p>
        </div>
    )
}
}
  export default Second;
siddharth Alagesan
  • 116
  • 6

1 Answers1

0

You can pass parameters on query like;

<Route path="/Second:city" component={second} />

And click from first link can be something like this;

<Link to={`/second/${this.state.city}`}>

Finally in second component you can get the city value with;

const { city } = this.props.match.params;

For more info: Click here

Cappydh
  • 26
  • 1
  • 6
  • thank you so much answer for me. this code change my url **http://localhost:3000/second/sending** but the page not is played. I'm missing any thing in second page constructor ? please help me – siddharth Alagesan Aug 12 '20 at 12:25
  • I'm update my second class component in question . and need to navigate second component as programmatic while on-click button. – siddharth Alagesan Aug 12 '20 at 12:46
  • Your url should be like localhost:3000/second/sending:berlin Then you can read it with this.props.match.params.city. So you should update your Link as I mentioned above in the answer. – Cappydh Aug 12 '20 at 19:40
  • Thanking you resolved and so sorry for later. In fist.js `onclick (){ var str = "/Second/" + document.getElementById("city").value ; history.push(str); } ` and second.js ; `this.setState({city : this.props.match.params.cityid })` are working Finally resolve by `import histroy.js` https://stackoverflow.com/questions/42672842/how-to-get-history-on-react-router-v4 Still not get answer how to use history.js in – siddharth Alagesan Sep 24 '20 at 18:24