Front end career project: passing thoughts

cy_porteous · August 17, 2024, 6:14am

Hello community, I hope all is well?

I’m stuck on the passing thoughts React project, on task 6. I’ve followed the hints, and video but must be missing something. Basically I should be able to enter a thought it just renders as “object object”? Please can someone advise or shed some light on what I’m missing?

Thanks in advance,

Cy

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 = () => {
setThoughts((thoughts) => [thought, …thoughts]);
};

return (

Passing Thoughts

);
}

AddThoughtForm.js

mport React, { useState } from “react”;
import { generateId, getNewExpirationTime } from “./utilities”;

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

return (

);
}

Thought.js

import React from ‘react’;

export function Thought(props) {
const { thought, removeThought } = props;

const handleRemoveClick = () => {
removeThought(thought.id);
};

return (

×

{thought.text}

);
}

Utilities.js

export function getNewExpirationTime() {
return Date.now() + 15 * 1000;
}

let nextId = 0;
export function generateId() {
const result = nextId;
nextId += 1;
return result;
}

mtf · August 17, 2024, 7:22am

Here’s a passing thought: How about reading the instructions on how to post code samples?

cy_porteous · August 17, 2024, 2:11pm

Hello mtf, thank you for the reply. I’ve looked through the instructions in the project but can’t find post code samples? Could you direct me to the exact location please?

staledata · August 17, 2024, 2:20pm

cy_porteous · August 17, 2024, 2:43pm

Hi Staledata, thank you for you input especially on a weekend, I’m familiar with single back ticks for interpolation, was unaware about the indentation aspect. Still stratching my head how either would resolve the issue (as the React chapters have been really challenging for me)?

staledata · August 17, 2024, 2:45pm

It could resolve the issue that few people would be willing to work through unformatted code and help you resolve the issue.
Let alone that it is nearly impossible to decipher what this looks like in your codebase as it is aleady interpreted:

return (

×

cy_porteous · August 17, 2024, 3:08pm

Hi Staledata, apologies, got what you as well as mtf initially meant, is the below code now legible / formatted?
Many thanks for your patience!

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(thoughts => [thought, ...thoughts]);
  };

  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 = ({ target }) => {
    const value = { target };
    setText(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
        value={text}
        onChange={handleTextChange}
        type="text"
        aria-label="What's on your mind?"
        placeholder="What's on your mind?"
      />
      <input type="submit" value="Add" />
    </form>
  );
}

Thought.js

import React from 'react';

export function Thought(props) {
  const { thought, removeThought } = props;

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

staledata · August 17, 2024, 3:21pm

This is properly formatted now, yes.
One issue I notice is that you have a function called addThought (camelCase) in App.js.
But what you take from props in AddThoughtForm.js is addthought

lisalisaj · August 17, 2024, 3:39pm

On the homepage of this site, there’s a link, “New User Guide”, which contained a lot of helpful info for new users to the Forums: where new users would go to figure out how the site was organized, the do’s and don’ts, how to format code, etc. All kinds of helpful info for new users. However, now when one follows that link, only the first link works while the rest are dead links. These links have been dead for ~ a year and that is a failure on behalf of the Admins of this site. All of those previous posts were archived or deleted (by Admins), and while I’ve asked for new content for guidance for new users here, nothing has replaced it for many, many months.

In the meantime…there is a Forums FAQ, located here:

Which does contain how to format code in posts, which was provided above.

There’s also this post:

I think most of that info still applies, even if it is older.

Just know that it does help if one’s code is formatted–especially if it’s Python (I know your code is JS)—for readability by anyone reviewing it. Glad it got sorted out!

cy_porteous · August 17, 2024, 3:39pm

Great spot Staledata, I’ve amended this in AddThoughtForm.js however still having issues rendering a thought in the form (still renders [object Object]?

cy_porteous · August 17, 2024, 3:41pm

Thanks for the tip, really appreciate the advice.

cy_porteous · August 17, 2024, 3:50pm

I’ve made a small change in the AddThoughtForm.js

from


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

to (see below)

The form is now rendering, so I’ll move on to the next task.

Thanks all!

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);
    setText('');
  };

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