title: react component - parent child interaction; component Lifecycle
body: <p>I am developing a simple browser app to get some specific data from the user.
  I have several components to simplify the proccess of collecting that data, but I am currently rethinking my way of rendering this component.</p>
  
  <p>Basically, i have my main component, which uses state to keep track of which component to render.</p>
  
  <p>I am doing this for almost all of my components.
  Also, i also have a function inside the parent component, that i pass to the child component via props, and that is used as a callback to pass the child state to its parent, when that component is no longer useful.</p>
  
  <pre><code>class Main extends React.Component {
    constructor(props){
       this.state = {
          renderA: true,
          renderB: false,
          childState: null
       }
    }
  
    collectState(state){
        this.setState({
           childState: state
       });
    }
  
    render() {
       let content = null;
       if(this.state.renderA === true){
           content = &lt;ComponentA /&gt;
       } else {
           content = &lt;ComponentB /&gt;
       }
       return(
        &lt;div&gt;
           {content}
        &lt;/div&gt;);
     }
  }
  </code></pre>
  
  <p>So, using the above example, the child would be something like this</p>
  
  <pre><code>class ComponentA extends React.Component {
     constructor(props){
       super(props);
       this.state = {
          stop: false,
          usefullInfo: null
       }
  
     destroy() {
        this.props.collectstate(this.state.usefullInfo)
     }
  
     render(){
      render something (like a Form) untill this.state.usefullInfo is set;
      in that case, set this.state.stop true which will call destroy, passing the usefull information to parent
     }
  }
  </code></pre>
  
  <p>So, this method works for me, but i can see clearly that most probably this is not the way to do this.</p>
  
  <p>At this point my question are:</p>
  
  <p>1) how can I stop rendering a component without having to track it with some property like this.state.stop ?</p>
  
  <p>2) if i want to render 2 different components, like in the main component, do I always have to keep a renderA and renderB property on state, to render one or another?</p>
  
  <p>3) is there a better way to pass information from child to parent? i am currently using a callback function passed via props from parent to child, and i am invoking that callback when the component has done its purpose</p>
  
  <p>4) any general suggestions on how to improve the quality of the above code?</p>
  
  <p>Thank you for you help :)!</p>