Recently I learned how to pass props from one ponent to another. In my case, from <FileTree> to <TextBox>, as you can see here:

But after, I reorganized the code a bit and now it is possible to see the structure of my React App inside <App> (App.js). I decided to put the <FileTree> and <TextBox> side by side, with Bootstrap.

So, logically I thought that passing props from <App> to <TextBox> would be the same as I did before: From <FileTree> to <TextBox>. Unfortunatelly, it is not the case.

At the moment, this is the code inside <App>:

// Structure of the project
export class App extends React.Component {
constructor(props) {
    super(props);
}

render() {
    return (
    <div>
        <div className="col-md-12">
            <SearchEngine />
        </div>
        <div className="col-md-6">
            <FileTree />
        </div>
        <div className="col-md-6">
            <TextBox content={this.props.activeNode} />
        </div>
    </div>
    );
}
}

And here, the code inside <TextBox>:

// TextBox ponent
export class TextBox extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        content: 'Select A Node To See Its Data Structure Here...'
    }
    this.showContent = this.showContent.bind(this);
}

showContent (newContent) {
    this.setState ({
        content: newContent
    })
}

ponentWillReceiveProps (nextProps) {
    this.setState ({
        content: nextProps.content
    })
}

render() {
  return (
    <div className="padd_top">
      <div className="content_box">{this.state.content}</div>
    </div>
  );
}
}

export default TextBox;

Just in case, here one can find the <FileTree> ponent:

// Construction of FileTree
export class FileTree extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      activeNode: null
    }
    this.setActiveNode = this.setActiveNode.bind(this);
  }

  setActiveNode(name) {
    this.setState({activeNode: name})
  }

  render() {
    return(
      <div className="padd_top">{
        renderTree(
          this.props.root || root, 
          this.setActiveNode, 
          this.state.activeNode
          )
        }  
      </div>
    )
  }  
}

I'm recently getting to know React.js and I'm very thankful for any advice/clarity you can provide.

Thank you.

Recently I learned how to pass props from one ponent to another. In my case, from <FileTree> to <TextBox>, as you can see here: https://codesandbox.io/s/y018010qk9

But after, I reorganized the code a bit and now it is possible to see the structure of my React App inside <App> (App.js). I decided to put the <FileTree> and <TextBox> side by side, with Bootstrap.

So, logically I thought that passing props from <App> to <TextBox> would be the same as I did before: From <FileTree> to <TextBox>. Unfortunatelly, it is not the case.

At the moment, this is the code inside <App>:

// Structure of the project
export class App extends React.Component {
constructor(props) {
    super(props);
}

render() {
    return (
    <div>
        <div className="col-md-12">
            <SearchEngine />
        </div>
        <div className="col-md-6">
            <FileTree />
        </div>
        <div className="col-md-6">
            <TextBox content={this.props.activeNode} />
        </div>
    </div>
    );
}
}

And here, the code inside <TextBox>:

// TextBox ponent
export class TextBox extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        content: 'Select A Node To See Its Data Structure Here...'
    }
    this.showContent = this.showContent.bind(this);
}

showContent (newContent) {
    this.setState ({
        content: newContent
    })
}

ponentWillReceiveProps (nextProps) {
    this.setState ({
        content: nextProps.content
    })
}

render() {
  return (
    <div className="padd_top">
      <div className="content_box">{this.state.content}</div>
    </div>
  );
}
}

export default TextBox;

Just in case, here one can find the <FileTree> ponent:

// Construction of FileTree
export class FileTree extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      activeNode: null
    }
    this.setActiveNode = this.setActiveNode.bind(this);
  }

  setActiveNode(name) {
    this.setState({activeNode: name})
  }

  render() {
    return(
      <div className="padd_top">{
        renderTree(
          this.props.root || root, 
          this.setActiveNode, 
          this.state.activeNode
          )
        }  
      </div>
    )
  }  
}

I'm recently getting to know React.js and I'm very thankful for any advice/clarity you can provide.

Thank you.

• javascript
• reactjs

• Where are you getting the value of this.props.activeNode from? – Liam Commented Apr 27, 2018 at 10:40
• Can you provide the code inside your ReactDOM.render method? – Harish Soni Commented Apr 27, 2018 at 10:43
• @Liam, check the code in the link: codesandbox.io/s/y018010qk9 – RCohen Commented Apr 27, 2018 at 10:45
• @HarishSoni, this link provides all the code: codesandbox.io/s/y018010qk9 – RCohen Commented Apr 27, 2018 at 10:48
• Where are your FileTree and TextBox ponents? – Harish Soni Commented Apr 27, 2018 at 10:48

2 Answers 2

You need to use lift state method passing state from child to parent then from parent pass it to the child you want

In your parent ponent create a constructor with states then create liftStateUp function pass it to the child ponent that you want to receive the data from

  constructor(props) {
    super(props)
    this.state = {
      activeNode: '',
    }
  }

  liftStateUp = (data) =>{
    this.setState({ activeNode: data})
  }

  <div>
    <div className="col-md-6">
      <FileTree liftStateUp={this.liftStateUp} />
    </div>
    <div className="col-md-6">
      <TextBox content={this.state.activeNode} />
    </div>
  </div>

Then in file_tree.js FileTree function you need to call liftStateUp function that we created it in the parent ponent

  setActiveNode(name) {
    this.setState({ activeNode: name });
    this.props.liftStateUp(name);
  }

https://reactjs/docs/lifting-state-up.html

Props are passed down from the parent ponent to child ponent. You need to work with global store so that you can interact with state in different siblings of ponents. For this, you may use redux.

If your application size is smaller, then you may also try using context api.

Hope, this helps to you.