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.

Hi there, did you put the following code inside handleSubmit function?

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

if (text.length > 0) {
props.addThought(thought);
setText(“”);
}

Hello,

I was able to figure out what was wrong in another post. I did use your code but it did not work after trying to save (same issue I had with mine). I’m certain this project is just very buggy. I appreciate your help very much!

This project is not working for my either. I wrote my code correctly and when it still wasn’t working I chose to compare it character for character against the solution video and even when I made mine identical and formatted it exactly the same way it still doesn’t work for me. nothing changes at all in fact when I click save…

I am going to copy and past the entire project into my own CRA and see what happens…

1 Like

Hello,

please let me know if you still need help with this as I can find the solution that I was given in another post and give it to you. I can certainly confirm that this project is buggy and following the video step by step will still give you problems.

Thank you! I was able to get it working both on the site and in my own environment :call_me_hand:t3::+1:t3:

Best,
Tomo

1 Like

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.