passing text box value to another React page in different page whereas shows in same page

Question

I have finding difficault to pass the value form one component to another component in React Js. I have files like App.js and Home.JS

App.js have one input box and one h1 tag while typing on the input box the value will be displayed inside the h1 tag. I wants the same method whereas instead of displaying on the same page i want to display the same value in Home.js with React Router.

Appp.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {

  constructor(){
    super();
    this.state = {
        name : "sivaprakash",
        age : 25
    }
  }
  update(e){
    this.setState({name: e.target.value})
  }
  render() {


    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} width="50" height="50" className="App-logo" alt="logo" />
        </header>
        <section>
          <h1>{this.state.name} - {this.state.age}</h1>
          <form>
              <input type="text" name="tx1" onChange={this.update.bind(this)} placeholder="Type Something..."/>
          </form>
          </section>
      </div>
    );
  }
}


export default App;

Home.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class Home extends Component {
  constructor(){
    super();
    this.state = {
        name : "",

    }
  }

  render() {


    return (
      <div className="App">
          <h1>{this.state.name} </h1>

      </div>
    );
  }
}

export default Home;

Please let me know if my question seems confusing.

Yeah, redux or any similar library can make it simpler for you to pass the data, or either you can use the React Context in your application. Since these components are not connected. So you can't pass the data as the props also — Ashwamegh, Dec 06 '18 at 10:31
I would definitely not recommend using neither redux nor react context for this kind of simple operation. I'll write an answer with how I would do it using simple react component state. — darksmurf, Dec 06 '18 at 10:37
Possible duplicate of [How to pass props to {this.props.children}](https://stackoverflow.com/questions/32370994/how-to-pass-props-to-this-props-children) — Sanjay Shr, Dec 06 '18 at 13:54

score 1 · Accepted Answer · answered Dec 06 '18 at 10:43

1

First, you have to render Home.js in App.js.

import Home from './home_component_path'

ex: import Home from './Home';

Then render Home component bellow form section or wherever to wish to, and pass App.js state as props to Home.js like this in App.js

<Home user={this.state}/>

In Home.js component render passed props like this. Instead of <h1>{this.state.name} </h1> do this <h1>{this.props.user.name} </h1>

answered Dec 06 '18 at 10:43

Sanjay Shr

2,026
2
16
17

Thanks for your suggestion. as per your cod, Value getting printed in App.js itself but i need to navigate to Home.js and want to printed there in Home.js. – Sivaprakash D Dec 06 '18 at 11:02

score 1 · Answer 2 · answered Dec 06 '18 at 10:55

In React this is usually solved by lifting state up, meaning you keep the state in a parent component and pass the value (and, if you want to, a change handler) down to the child components showing the data.

Using React Router you could do something like this:

Parent.js:

class Parent extends Component {
    state = {
        name: "sivaprakash",
        age: 25
    };

    changeName = newName => this.setState({ name: newName });

    render() {
        return (
            <Router>
                <Switch>
                    <Route path="/app"
                           render={() =>
                               <App name={this.state.name}
                                    age={this.state.age}
                                    changeName={this.changeName} />
                           } />
                    <Route path="/home"
                           render={() =>
                               <Home name={this.state.name} />
                           } />
                </Switch>
            </Router>
        )
    }
}

App.js:

class App extends Component {
    update(e) {
        this.props.changeName(e.target.value);
    }

    render() {
        return (
            <div className="App">
                <header className="App-header">
                    <img src={logo}
                         width="50"
                         height="50"
                         className="App-logo"
                         alt="logo" />
                </header>
                <section>
                    <h1>{this.props.name} - {this.props.age}</h1>
                    <form>
                        <input type="text"
                               name="tx1"
                               onChange={this.update.bind(this)}
                               placeholder="Type Something..." />
                    </form>
                </section>
            </div>
        );
    }
}

Home.js:

class Home extends Component {
    render() {
        return (
            <div className="App">
                <h1>{this.props.name} </h1>
            </div>
        );
    }
}

Remember to mark the answer as the correct solution ;) – darksmurf Dec 20 '18 at 19:28 — darksmurf, Dec 20 '18 at 19:28

passing text box value to another React page in different page whereas shows in same page

2 Answers2