How to use state of one component in another file in reactjs?

Question

I have two js files, one is app.js and the other one is foo.js. I want to access the state of app.js in foo.js.

App.js

class App extends React.Component {
  constructor(props) {
    super(props);
      this.state = {test:" None "};
  }

  function onChange(event) {
    this.setState({
      test: event.target.value,
    });
  }

 render() {
   return(
     <select onChange={this.onChange}>
       <option value="India">India<option>
       <option value="Australia">Australia<option>
     </select>
   );
 }
}
export default App;

now i want to access the above state (test) in foo.js file.

Foo.js

class Foo extends React.Component {
  render() {
    /* Some magic happens */
    return(<h1>{this.props.test}</h1>);
  }
}

Am new to reactjs. How can i do it? Thanks for help in advance.

You can't. You must use `props` or some state management library like Redux. — Héctor, May 03 '19 at 10:33
you won't be able to achieve this untill and unless you have parent child relation between both the components. — Vikas Singh, May 03 '19 at 10:34
By using [state-uplifting](https://reactjs.org/docs/lifting-state-up.html) — Anand Undavia, May 03 '19 at 10:35

score 6 · Accepted Answer · answered May 03 '19 at 10:37

6

Two ways to do it:

One of the two components will be the parent of the other. The state will be defined in the parent and passed as a prop to the child.
The two components will be children of a third component. The state will be defined in the parent and passed to the two children as a prop.

If you need to modify the state in one of the children components, you will need to pass a callback function from the parent to the child, so that the child calls it to perform a change.

answered May 03 '19 at 10:37

Yossi

5,577
7
41
76

Can you show me some examples or links for that @Yossi. it would be more helpful. – Ramesh Raghavan May 03 '19 at 10:52
@RameshRaghavan, look at this fiddle => https://jsfiddle.net/deL7j29y/14/ – Pavan May 03 '19 at 12:42
Are you OK with Pavan's example or do you need anything else? – Yossi May 03 '19 at 13:17
1

And thanks for your guidance @yossi. It helped me a lot. – Ramesh Raghavan May 04 '19 at 03:10

How to use state of one component in another file in reactjs?

1 Answers1

Linked