Passing thoughts problem

In this project: 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

I’m having a little trouble at step 5. For some reason, my event.preventDefault() call is not working. What’s doubly frustrating is I did this project yesterday and everything worked fine. Now after resetting the workspace, I can’t figure out what’s wrong.

Please help before I punch my computer screen! :joy:

code for 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((prev) => [thought, ...prev])
  }

  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} />
          ))}
        </ul>
      </main>
    </div>
  );
}

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

And my AddThoughtForm.js code:

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

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

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

  const handleSubmit = (event) => {
    event.preventDefault();
    const thought = {
      id: generateId()
      text: text,
      expiresAt: getNewExpirationTime()
    }
    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>
  );
}

For the sake of your monitor, let’s dig into this a bit. :laughing:

What you’re experiencing is a little unique to the Codecademy learning environment for React. You’d have much better error messages if you were developing locally.

Optional Reading: You aren’t seeing your updated code in the browser because of errors in your code. What’s happening behind the scenes is that it’s producing a file named “App.compiled.js” from your source code. The errors in your code are preventing it from being able to make a new version of that file, so you are seeing the results of the last time it was able to successfully make that file. Unfortunately, it isn’t passing on the errors for you to view. (If you ever suspect this is happening, you can change something obvious like a text heading or something to see if it shows after you press Save)

How to fix: There are 2 things you need to review to fix it.

Look how you are declaring this arrow function. You’re missing a =

Double check the syntax of this object. You are missing a comma

Once you fix those things, you should be able to successfully run your project and see the changes that you’ve been making again. As I said, if you were developing in another environment, you’d likely have access to better error reporting, so don’t feel bad and show mercy to your monitor.

2 Likes

++ for developing locally for richer error messages.

1 Like

Thank you!! You saved my monitor. :slight_smile:

And yeah, I was getting annoyed at the lack of error messaging. Local development is definitely easier to debug.

1 Like