Passing Thoughts Project Problem when I add a thought the page removes all previous thought and only shows that new thought

Hello the Project Passing Thought I have already completed it with using function just to try challenge myself even further I am trying to complete it by using classes now.

https://www.codecademy.com/paths/full-stack-engineer-career-path/tracks/fscp-react-part-ii/modules/fecp-function-components-and-hooks/projects/react-hooks-passing-thoughts

So When I add a thought from the input it deletes all the previous Thoughts which is not what I wanted. As I wanted that new added Thought to be placed at the end or behind all the previous Thoughts.

I think I might managed have done everything else in regards to the project like the Thoughts are deleted after .expiresAt() by themselves, I can manually delete a Thought. But as What I mentioned above is my problem.

I try explain my logic a bit, I have a Child Component (AddThoughtForm) making a State from the input tag then I used Object.assign({}, prev.this.state) to make a copy for the Parent state which the Child Component is receiving as a prop. Then I send this back up to the Parent Component through a method I made in the Parent Component that the Child Component is working with and doing this work as a prop. Then I can see that the Parent Component receives the work done by the Child Component as objects. But the problem is I lose the previous information that the page already had.
If there is a better way to do than this way let me know please.

More clearly look at these images

And when I press ADD the text below is gone! Which is not what i wanted. What I wanted is to simply push the new Add input into the information below

Any Ideas on how to make this work?

Here is my code

App.js - Parent Component

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: "They'll be removed after 15 seconds.",
      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("LOOK")
    console.log(thought)
    console.log("DONE")
   
    console.log(this.state.thoughts);
    this.state.thoughts.push(thought);
    this.setState(prevState => ({ 
      ...prevState,
      thoughts: [thought] 
    }))
    console.log("passed over")
    console.log(this.state.thoughts);

  }
  removeThought(selected) {
    //alert('selected');
    let updatedThoughts = this.state.thoughts.filter((thought) => selected !== thought.id);
    this.setState({ thoughts: updatedThoughts })

}

  
  render() {
    return (
      <div className="App">
        <header>
          <h1>Passing Thoughts</h1>
        </header>
        <main>
         <AddThoughtForm 
          addThought={this.addThought}
          thoughts={this.state.thoughts} />
          <ul className="thoughts">
            {(this.state.thoughts) && this.state.thoughts.map((thought, index) => (
              <Thought 
                key={thought.id} 
                thought={thought}
                removeThought={this.removeThought} />
            ))}
          </ul>
        </main>
      </div>
    );
  }
  componentDidMount(prevState) {
    
  }
  componentDidUpdate(prevState) {

  }
}

export default App;

AddThoughtForm.js - Child Component - This is Involved with the problem I have

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] // no biggie i can delete the [] still dont think it will be effected
        }
        this.handleTextChange = this.handleTextChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }
    handleTextChange(event) {
       
        const { value } = event.target
        console.log(value)
        
        this.setState(prevState => {
            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 (
            <form className="AddThoughtForm" onSubmit={this.handleSubmit}>
      <input
        type="text"
        aria-label="What's on your mind?"
        placeholder="What's on your mind?"
        value={this.state.text}
        onChange={this.handleTextChange}
      />
      <input type="submit" value="Add" />
    </form>
        )
    }
}

export default AddThoughtForm;

AddThoughtForm - the method involved with the problem and the constructor this.state

constructor(props) {
        super(props);
        this.state = {
            ideas: [this.props.thoughts] // no biggie i can delete the [] still dont think it will be effected
        }
        this.handleTextChange = this.handleTextChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }
    handleTextChange(event) {
        const { value } = event.target
        console.log(value)

        this.setState(prevState => {
            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)
    }

Finally
Thought.js - Child Component - I dont think this is involved with the problem and It is doing some other things for me

import React from 'react';


class Thought extends React.Component {
    constructor(props) {
        super(props);
        this.handleRemoveClick = this.handleRemoveClick.bind(this);
        this.componentDidMount = this.componentDidMount.bind(this);
        this.componentDidUpdate = this.componentDidUpdate.bind(this);
        this.componentWillUnmount = this.componentWillUnmount.bind(this);
    }

    handleRemoveClick() {
     
        this.props.removeThought(this.props.thought);
    }
    
    render() {
        return (
        <li className="Thought">
        <button
          aria-label="Remove thought"
          className="remove-button"
          onClick={this.handleRemoveClick}
      >
        &times;
      </button>
      <div className="text">{this.props.thought.text}</div>
    </li>
        )
    }
    componentDidMount() {
        console.log(this.props.thought.expiresAt);
        console.log(this.props.thought.id);
        const timeRemaining = this.props.thought.expiresAt - Date.now();
        console.log(timeRemaining);
        this.timeID = setTimeout(() => {
            this.props.removeThought(this.props.thought.id);
        }, timeRemaining);
        
    }
    componentDidUpdate() {
       
    }
    componentWillUnmount() {
        clearInterval(this.timeID);
    }
    
}

export default Thought

Hey byte2358379181
just an educated guess, I think you may have a issue with how you use setState, when you change the state (adding a thought) it deletes the previous state and retains only the most recent one.

Looking at your code I see that your state is an object with property thoughts and value an array of objects.

this.state = {
      thoughts: [{
        id: generateId(),
        text: 'This is a place for your passing thoughts.',
        expiresAt: getNewExpirationTime()
      },

When you set the state with the function addThought() you are doing this:

  addThought(thought) {
    
    console.log("LOOK")
    console.log(thought)
    console.log("DONE")
   
    console.log(this.state.thoughts);
    this.state.thoughts.push(thought);
    this.setState(prevState => ({ 
      ...prevState,
      thoughts: [thought] 
    }))
    console.log("passed over")
    console.log(this.state.thoughts);

  }

What is returning setState here? What you should return is an object with property thoughts and value an array like this [thought, ...prevState], whatever setState returns this value is going to be the new state.

Hope that this helps :slight_smile: