1

I have a file named separatefile.jsx, in this file parent component name is Content and child component name is Child.

separatefile.jsx 

import React from 'react';
import Parent from './learning.jsx';

class Content extends React.Component {
  constructor() {
    super();
    this.state = {
      finding : 'i am finding'
    }
  }
  render() {
    return (
      <div>
        <Child childprop={this.state.finding}/>
        <Parent/>
      </div>
      );
  }
}

class Child extends React.Component {
  render() {
    return (
      <div>
      <h2>{this.props.childprop}</h2>
      <h1>child class property</h1>
      </div>
    );
  }
}
export default Content;

This is another file named as learning.jsx , this file has Parent component named as Parent and Child component named as a Children.

My questions is that i need to access Parent component property(parent component for learning.jsx) from Child component(child component for separatefile.jsx file)...

learning.jsx

import React from 'react';


class Parent extends React.Component {
  constructor() {
    super();
    this.state = {
      searching : 'i will find the solution'
    }
  }
  render() {
    return (
      <div>
        <Children childrenprop={this.state.searching}/>
      </div>
      );
  }
}

class Children extends React.Component {
  render() {
    return (
      <div>
      <h2>{this.props.childrenprop}</h2>
      </div>
    );
  }
}
export default Parent;
praveenkumar
  • 335
  • 1
  • 3
  • 12

3 Answers3

0

It's probably not a direct answer but if you are starting a new app I would recommend you to use Redux with react-redux.

Redux is a predictable state container for JavaScript apps.

It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. On top of that, it provides a great developer experience, such as live code editing combined with a time traveling debugger.

It's very small library so it's easy to understand how everything works. It might be a good solution to your problem.

Todo app example
You can also check out awesome egghead.io free tutorial - Getting Started with Redux

Here is the answer about the redux benefits by its author Dan Abramov

Community
  • 1
  • 1
Dmitriy Nevzorov
  • 6,042
  • 1
  • 20
  • 28
  • Great advice - but this is not an answer to the question and not even remotely helpful to solving the problem at hand. It even appears as a random shameless push for a library (a good library nonetheless). – Ryan Wheale Aug 23 '16 at 14:33
  • I would disagree. [Vijay](http://stackoverflow.com/users/558972/vijay) quoted the React official documentation and it is exactly what I'm suggesting. To use global `state` to manage communication between unrelated components. – Dmitriy Nevzorov Aug 23 '16 at 14:37
  • What does Vijay's answer have to do with this? Your answers are completely unrelated (flux vs redux). Neither of you mention anything about how to access the state of parent components. There are many ways to manage state in react... great. But how do you access state of parent component? Answer the question and I will remove my downvote... – Ryan Wheale Aug 23 '16 at 14:43
  • How to use global state... give some detailed explanation Dmitriy – praveenkumar Aug 23 '16 at 14:45
  • Ryan if u have any information about my question give some hints , it will help to get the solution – praveenkumar Aug 23 '16 at 15:02
0

If I understood you correctly, you want to use Parent's state in your Children component?

You can pass it down the component tree as props, e.g.:

class Content extends React.Component {
  constructor() {
    super();
    this.state = {
      finding : 'i am finding'
    }
  }
  render() {
    return (
      <div>
        <Child childprop={this.state.finding}/>
        <Parent finding={this.state.finding} />
      </div>
    );
  }
}

class Parent extends React.Component {
  constructor() {
    super();
    this.state = {
      searching : 'i will find the solution'
    }
  }
  render() {
    return (
      <div>
        <Children finding={this.props.finding} childrenprop={this.state.searching}/>
      </div>
      );
  }
}

class Children extends React.Component {
  render() {
    return (
      <div>
        <h2>{this.props.childrenprop}</h2>
        <div>{this.props.finding}</div>
      </div>
    );
  }
}
TimoStaudinger
  • 41,396
  • 16
  • 88
  • 94
  • happy to see your immediate answer TimoSta, once again simply, i explain my question. I need to access 'finding' property from Children component.. i hope you understood – praveenkumar Aug 23 '16 at 14:37
  • @PraveenKumarInvoscape I changed the instantiation of `Parent` a bit. I made a mistake and passed the prop into the wrong component. Try again please? – TimoStaudinger Aug 23 '16 at 15:08
  • i have one doubt if i need to access Parent component property(learning.jsx) from Child component(separate.jsx) it tells maximum call stack size exceeded... what its means – praveenkumar Aug 24 '16 at 05:13
0

The React documentation provides an answer.

For communication between two components that don't have a parent-child relationship, you can set up your own global event system. Subscribe to events in componentDidMount(), unsubscribe in componentWillUnmount(), and call setState() when you receive an event. Flux pattern is one of the possible ways to arrange this.

vijayst
  • 20,359
  • 18
  • 69
  • 113
  • thk u vijay, i am new to reactjs so i need some detailed explanation or give some links to describe, you defined functions – praveenkumar Aug 23 '16 at 14:40