title: ReactJS Classes How to pass State from Child Component to its Parent?
body: <p>I will call the LI tags like this (li) so they are not made into bullet points for his question</p>
  <p>Hi I am trying to send a Child component to its Parent in ReactJS.</p>
  <p>I tried many things I managed to send the child component state back up to its Parent props but when the page renders I have a couple of (li) tags which I want the update to update with it for example like:</p>
  <p>(li) hard coded text (/li)
  (li) old text (/li)
  (li) update prop (/li)
  (li) update prop etc (/li)</p>
  <p>but instead the update deletes all previous code so it looks like:</p>
  <p>(li) update prop deleted all previous li's (/li)</p>
  <p>Hope that made sense here is my code</p>
  <p>Parent Component</p>
  <pre><code>    import React from 'react';
  import { generateId, getNewExpirationTime } from '../../util/utilities';
  import Thought from '../Thought/Thought.js'
  import AddThoughtForm from '../AddThoughtForm/AddThoughtForm.js'
  
  
  class App extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        thoughts: [{
          id: generateId(),
          text: 'This is a place for your passing thoughts.',
          expiresAt: getNewExpirationTime()
        },
        {
        id: generateId(),
        text: &quot;They'll be removed after 15 seconds.&quot;,
        expiresAt: getNewExpirationTime()
      }]
    };
      this.addThought = this.addThought.bind(this);
      this.removeThought = this.removeThought.bind(this);
      this.componentDidMount = this.componentDidMount.bind(this);
      this.componentDidUpdate = this.componentDidUpdate.bind(this);
    }
    addThought(thought) {
     
      console.log(&quot;LOOK&quot;)
      console.log(thought)
      console.log(&quot;DONE&quot;)
  
      console.log(this.state.thoughts);
      this.state.thoughts.push(thought);
      this.setState(prevState =&gt; ({ 
        ...prevState,
        thoughts: [thought] 
      }))
      console.log(&quot;passed over&quot;)
      console.log(this.state.thoughts);
   
    }
    removeThought(selected) {
      //alert('selected');
      let updatedThoughts = this.state.thoughts.filter((thought) =&gt; selected.id !== thought.id);
      return this.setState({ thoughts: updatedThoughts })
  
  }
  
    
    render() {
      return (
        &lt;div className=&quot;App&quot;&gt;
          &lt;header&gt;
            &lt;h1&gt;Passing Thoughts&lt;/h1&gt;
          &lt;/header&gt;
          &lt;main&gt;
           &lt;AddThoughtForm 
            addThought={this.addThought}
            thoughts={this.state.thoughts} /&gt;
            &lt;ul className=&quot;thoughts&quot;&gt;
              {(this.state.thoughts) &amp;&amp; this.state.thoughts.map((thought, index) =&gt; (
                &lt;Thought 
                  key={thought.id} 
                  thought={thought}
                  removeThought={this.removeThought} /&gt;
              ))}
            &lt;/ul&gt;
          &lt;/main&gt;
        &lt;/div&gt;
      );
    }  
    
  }
  </code></pre>
  <p>Still on the Parent Component my .addThought(arg) is where the action is. This is where I'm sending the Child AddThoughtForm state object into it. By inside of .addThought() I am doing this:</p>
  <pre><code>addThought(thought) {
  
  console.log(&quot;LOOK&quot;)
  console.log(thought)
  console.log(&quot;DONE&quot;)
  
  console.log(this.state.thoughts);
  this.state.thoughts.push(thought);
  this.setState(prevState =&gt; ({ 
    ...prevState,
    thoughts: [thought] 
  }))
  console.log(&quot;passed over&quot;)
  console.log(this.state.thoughts);
  }
  </code></pre>
  <p>What happens is when I pass it over my previous State of my parent is deleted and replaced by this new information from my child component. How do I stop that? I want to only add this new Information to the previous info that the Parent state already have. here is the state from my parent:</p>
  <pre><code>constructor(props) {
      super(props);
      this.state = {
        thoughts: [{
          id: generateId(),
          text: 'This is a place for your passing thoughts.',
          expiresAt: getNewExpirationTime()
        },
        {
        id: generateId(),
        text: &quot;They'll be removed after 15 seconds.&quot;,
        expiresAt: getNewExpirationTime()
      }]
    };
      this.addThought = this.addThought.bind(this);
      this.removeThought = this.removeThought.bind(this);
      this.componentDidMount = this.componentDidMount.bind(this);
      this.componentDidUpdate = this.componentDidUpdate.bind(this);
    }
  </code></pre>
  <p>Now over to the Child Component</p>
  <p>AddThoughtForm.js</p>
  <pre><code> import React from 'react';
  import { generateId, getNewExpirationTime } from '../../util/utilities';
  
  class AddThoughtForm extends React.Component {
      constructor(props) {
          super(props);
          this.state = {
              ideas: [this.props.thoughts] // I can take off [] 
          }
          this.handleTextChange = this.handleTextChange.bind(this);
          this.handleSubmit = this.handleSubmit.bind(this);
      }
      handleTextChange(event) {
          
          const { value } = event.target
        
        
          this.setState(prevState =&gt; {
              let thoughts = Object.assign({}, prevState.ideas);  // creating copy of state variable 
              thoughts.id = generateId();
              thoughts.text = value;                    // update the name property, assign a new value      
              thoughts.expiresAt = getNewExpirationTime();           
              return { thoughts };                                 // return new object 
          })
  
          
          console.log(this.state.ideas)
      }
      handleSubmit(event) {
          event.preventDefault();
          this.props.addThought(this.state.thoughts)
          
  
          
          alert(this.state.ideas);
       
      }
  
      render() {
          return (
              &lt;form className=&quot;AddThoughtForm&quot; onSubmit={this.handleSubmit}&gt;
        &lt;input
          type=&quot;text&quot;
          aria-label=&quot;What's on your mind?&quot;
          placeholder=&quot;What's on your mind?&quot;
          value={this.state.text}
          onChange={this.handleTextChange}
        /&gt;
        &lt;input type=&quot;submit&quot; value=&quot;Add&quot; /&gt;
      &lt;/form&gt;
          )
      }
  }
  
  export default AddThoughtForm;
  </code></pre>
  <p>On my .handleTextChange(event) is where I am linking it with my input tag in render so what I am doing what ever Is typed into it I want entered I want it be passed to my Parent Component. well It is passed over but it over-writes the old info every time the old (li) and it is then all just a new li being rendered. Any ideas on how I can fix all of this?</p>
  <pre><code>handleTextChange(event) {        
          const { value } = event.target
          console.log(value)
         
          this.setState(prevState =&gt; {
              let thoughts = Object.assign({}, prevState.ideas);  // creating copy of state variable 
              thoughts.id = generateId();
              thoughts.text = value;                     // update the name property, assign a new value      
              thoughts.expiresAt = getNewExpirationTime();           
              return { thoughts };                                 // return new object 
          })        
          console.log(this.state.ideas)
      }
  </code></pre>