title: reusing component instance in react render
body: <p>Parent class has several children components,  all the children are instantiated inside render method, so any change to  parent state will cause all the children to be re instantiated , everytime render is called react creates  new instance of children, there by loosing state of children, in order to reuse the child instance I tried retrieving child instance using parent.refs.childRef , but this gives me error  </p>
  
  <blockquote>
    <p>Uncaught Error: Objects are not valid as a React child</p>
  </blockquote>
  
  <p>,  here is my code</p>
  
  <pre><code>placeHolderComponent(){
          let component;
          let palceHolderValue=this.state.uiState.placeHolder;
          let classInstance=this;
          if(palceHolderValue=='empty'){
              component=&lt;EmptyComponent&gt;&lt;/EmptyComponent&gt;
          }
          else if(palceHolderValue=='search'){
                  component= classInstance.refs.gpSearchComponent!=null?  classInstance.refs.gpSearchComponent:    &lt;GpSearch  ref="gpSearchComponent"/&gt;
          }
          return component;
      }
  </code></pre>
  
  <p>here GpSearch Component is instantiated with a ref attribute , and code checks if parent.refs.childComponentRefId is not null then render that instance, instead a new instance. I am getting this error </p>
  
  <blockquote>
    <p>Uncaught Error: Objects are not valid as a React child (.... If you
    meant to render a collection of children, use an array instead or wrap
    the object using createFragment(object) from the React add-ons</p>
  </blockquote>