Passing Thoughts project

I’m stuck at task 5. I added the handleSubmit() function with the event.preventDefault(); command. However, when I click “Add” it still refreshes the page.
I basically went line by line through the Get Unstuck video and checked my code in App.js and AddThoughtForm.js. It is exactly the same, and yet it works in the video but not for me.
This is the link to the project exercise:
https://www.codecademy.com/paths/full-stack-engineer-career-path/tracks/fscp-22-react-part-ii/modules/wdcp-22-function-components-and-hooks/projects/react-hooks-passing-thoughts
Would appreciate any help.

Could you please add your code here?
Plaese make sure to format it (How to format code in posts).

Thanks. I actually found what is wrong.
The “Save” button isn’t working in the Codecademy app. To check this, I deleted the whole form component from the AddThoughtForm.js file and clicked “Save”. Nothing happened, the form is still there.
I presume it might be a temporary bug in Codecademy.
Cheers.

1 Like

Hi There! I had the same problem but I realized it was just my mistake and the save button actually works. Do you want to add your code here so we can debug together? The link wouldn’t work for others to see your code I think.

@beta8168239601 @mirja_t hello, I am having the exact same issue. I have spent about a week trying to figure out what is wrong with the code because thus far, nothing is updating for me on this project. For example, adding new thoughts won’t work and the app continues to refresh when pressing “add.” I will also add that there are some discrepancies between what the get unstuck video shows vs. what the code formatter wants to do in certain parts of the code. This is how my addThoughtForm.js looks like:

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

Hi there. Let me attach my code for your reference. It has been a while and I don’t quite remember what’s the magic I put to make it work, but I just tested my app again and it’s working fine. Hope it helps. P.S. I changed the structure a bit but it shouldn’t matter.

//index.js import React, { useState } from 'react'; import ReactDOM from 'react-dom'; import { AddThoughtForm } from './AddThoughtForm'; import { Thought } from './Thought'; import { generateId, getNewExpirationTime } from './utilities'; import './style.css' 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]) } 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( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('app') ); //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(thought.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 minda?" value={text} onChange={handleTextChange} /> <input type="submit" value="Add" /> </form> ); } //Thoughts.js import React,{useEffect} from 'react'; export function Thought(props) { const { thought, removeThought } = props; useEffect(()=>{ const timeRemaining=thought.expiresAt-Date.now() const timeout=setTimeout(()=>{removeThought(thought.id)},timeRemaining) return ()=>{clearTimeout(timeout)} },[thought]) const handleRemoveClick = () => { removeThought(thought.id); }; return ( <li className="Thought"> <button aria-label="Remove thought" className="remove-button" onClick={handleRemoveClick} > &times; </button> <div className="text">{thought.text}</div> </li> ); } //utilities.js export function getNewExpirationTime() { return Date.now() + 15 * 1000; } let nextId = 0; export function generateId() { const result = nextId; nextId += 1; return result; }

Hello!

Thank you so much for the help. Unfortunately, after applying your code, this is still not working for me.