Get Unstuck: Passing Thought- Stuck on Task 6

Language Help React.js
1

Task 6 requires updating the handleSubmit function so that the form can submit the data and the data will appear on the screen. However, when I input a new thought and clicked the add button, the screen still refreshes and the new thought does not appear on the screen. I am unsure what I am missing here as I followed the provided hint and compared my code to the other person stuck on the same project.

Here is my code:

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';

export default 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>
  );
}

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(),
      }
      props.addThought(thought)

  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>
  );
}

I appreciate all the help!

2

In AddThoughtForm.js, you forgot the closing curly brace for handleSubmit.

scrn1

1 Like
3

Thank you! Not only I forgot the closing curly bracket, but in App.js there was an extra curly bracket in the addThought() function.

1 Like