Cannot add a thought on React thoughts exercise?

This is the exercise:

https://www.codecademy.com/courses/react-101/projects/react-hooks-passing-thoughts

This is my App.js:

import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import { AddThoughtForm } from './AddThoughtForm';
import { Thought } from './Thought';
import { generateId, getNewExpirationTime } from './utilities';

function App() {
  const [thoughts, setThoughts] = useState([
    {
      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(),
    },
  ]);

  const addThought = (thought) => {
    setThoughts((thought) => [thought, ...thoughts]);
  };

  const removeThought = (thoughtIdToRemove) => {
    setThoughts((thoughts) => thoughts.filter(thought => (thought.id !== thoughtIdToRemove)))
  };

  return (
    <div className="App">
      <header>
        <h1>Passing Thoughts</h1>
      </header>
      <main>
        <AddThoughtForm addThought = {addThought}/>
        <ul className="thoughts">
          {thoughts.map((thought) => (
            <Thought key={thought.id} thought={thought} removeThought={removeThought} />
          ))}
        </ul>
      </main>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('app'));

And this is my AddThoughtForm.js:

import React, {useState} from 'react';
import { generateId, getNewExpirationTime } from './utilities';

export function AddThoughtForm(props) {
  const [text, setText] = useState('');

  const handleTextChange = (event) => {
  setText(event.target.value);
}

const handleSubmit = (event) => {
  event.preventDefault();

const thought = {
id: generateId(), 
text: text, 
expiresAt: getNewExpirationTime()
}

if(text.length > 0) {
  props.Addthought(thought);
  setText('');
}
}

  return (
    <form className="AddThoughtForm" onSubmit={handleSubmit}>
      <input
        type="text"
        aria-label="What's on your mind?"
        placeholder="What's on your mind?"
        value={text}
        onChange={handleTextChange}
      />
      <input type="submit" value="Add" />
    </form>
  );
};

Any help would be much appreciated, thanks.

Hi @board1969292448
that might be the issue…

Oh god. I’m so embarrassed now.

Next time, i’ll copy the code into VSCode, cause the code editor in the browser doesn’t point out glaring errors like this haha!

1 Like

Yes, I did that too, when I was stuck. You get more helpful error messages then.