title: React - Passing props to App.js
body: <p>Recently I learned how to pass props from one component to another. In my case, from <code>&lt;FileTree&gt;</code> to <code>&lt;TextBox&gt;</code>, as you can see here: <strong><a href="https://codesandbox.io/s/y018010qk9" rel="nofollow noreferrer">https://codesandbox.io/s/y018010qk9</a></strong></p>
  
  <p>But after, I reorganized the code a bit and now it is possible to see the structure of my React App inside <code>&lt;App&gt; (App.js)</code>. I decided to put the <code>&lt;FileTree&gt;</code> and <code>&lt;TextBox&gt;</code> side by side, with Bootstrap.</p>
  
  <p>So, logically I thought that passing <code>props</code> from <code>&lt;App&gt;</code> to <code>&lt;TextBox&gt;</code> would be the same as I did before: From <code>&lt;FileTree&gt;</code> to <code>&lt;TextBox&gt;</code>. Unfortunatelly, it is not the case.</p>
  
  <p>At the moment, this is the code inside <code>&lt;App&gt;</code>:</p>
  
  <pre><code>// Structure of the project
  export class App extends React.Component {
  constructor(props) {
      super(props);
  }
  
  render() {
      return (
      &lt;div&gt;
          &lt;div className="col-md-12"&gt;
              &lt;SearchEngine /&gt;
          &lt;/div&gt;
          &lt;div className="col-md-6"&gt;
              &lt;FileTree /&gt;
          &lt;/div&gt;
          &lt;div className="col-md-6"&gt;
              &lt;TextBox content={this.props.activeNode} /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      );
  }
  }
  </code></pre>
  
  <p>And here, the code inside <code>&lt;TextBox&gt;</code>:</p>
  
  <pre><code>// TextBox component
  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
      })
  }
  
  componentWillReceiveProps (nextProps) {
      this.setState ({
          content: nextProps.content
      })
  }
  
  render() {
    return (
      &lt;div className="padd_top"&gt;
        &lt;div className="content_box"&gt;{this.state.content}&lt;/div&gt;
      &lt;/div&gt;
    );
  }
  }
  
  export default TextBox;
  </code></pre>
  
  <p>Just in case, here one can find the <code>&lt;FileTree&gt; component</code>:</p>
  
  <pre><code>// 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(
        &lt;div className="padd_top"&gt;{
          renderTree(
            this.props.root || root, 
            this.setActiveNode, 
            this.state.activeNode
            )
          }  
        &lt;/div&gt;
      )
    }  
  }
  </code></pre>
  
  <p><strong>I'm recently getting to know React.js</strong> and I'm very thankful for any advice/clarity you can provide.</p>
  
  <p>Thank you. </p>