title: How to pass props to recursive child component and preserve all props
body: <p>I've run into an interesting problem. I have a parent component that has an array of objects that gets passed to a child component that is a TreeView, meaning it is recursive. I'm passing a function, and a couple of other props to the child, along with the array of objects that is handled recursively by the child. When logging the props in the render function of the child, on the first render all the props are there, but as the recursive function moves through each object in the array, it 'loses' all the other props that are not being handled recursively. </p>
  
  <p>When the component first renders the props object is: prop1, prop2, arrayOfObjects</p>
  
  <p>As it re-renders as recursion is happening, the props object in the child becomes: arrayOfObjects.</p>
  
  <p>prop1, and prop2 have disappeared. </p>
  
  <p>The end result is that I'm not able to call a function in the parent from the child, so I cannot update the state depending on which node in the tree is clicked. I'm not using redux, because this is a style guide - separate from our production app, that is meant to be for devs only, and simple so if possible I'd like to handle all the state from within the components.</p>
  
  <p>There is one other issue - The array of objects is the folder structure of files in our styleguide, and I need to be able to click on a name in the list, and update the view with the contents of that file. This works fine when the file does not have any children, but when there are child nodes, if I click on the parent, the child is clicked. I've tried e.stopPropagation(), e.preventDefault() etc. but have not had any luck. Thanks in advance. </p>
  
  <p>Parent: </p>
  
  <pre><code>import React, {Component} from 'react'
  import StyleGuideStructure from '../../styleguide_structure.json'
  import StyleTree from './style_tree'
  
  class StyleGuide extends Component {
  
  constructor(props) {
      super(props)
  
      let tree = StyleGuideStructure
  
      this.state = {
          tree: tree
      }
  </code></pre>
  
  <p>This is the function I'd like to call from the child</p>
  
  <pre><code>   setVisibleSection(nodeTitle) {
  
      this.setState({
        section: nodeTitle
      })
  
     }
  
     render() {
  
       return(
  
       &lt;TreeNode 
        className="class-name-here" 
        setVisibleSection={this.setVisibleSection.bind(this)} 
        node={this.state.tree}
       /&gt;
  
      )
  
    }
  }
  
   export default StyleGuide
  </code></pre>
  
  <p>This is essentially what I have in the child, as a fiddle here:</p>
  
  <p><a href="https://jsfiddle.net/ssorallen/XX8mw/" rel="nofollow noreferrer">https://jsfiddle.net/ssorallen/XX8mw/</a></p>
  
  <p>The only difference is that inside the toggle function, I'm trying to call setVisibleSection in the parent, but no dice.</p>
  
  <p>Here is a photo of the console showing the props when the component initially renders, and then after recursion:
  <a href="https://i.stack.imgur.com/3LBPY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3LBPY.png" alt="enter image description here"></a></p>