Blank Thoughts

[arc9819962486]

Hi, I am working on the Blank Thoughts project from Learn Advanced React. On completing step four, the code would not render anymore.

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
import { AddThoughtForm } from "./AddThoughtForm";
import { Thought } from "./Thought";
import { generateId, getNewExpirationTime } from "./utilities";
import { logError } from "./error-logging-service";
import { ErrorBounday } from "react-error-boundary";

const createThought = (text) => {
  return {
    id: generateId(),
    text,
    expiresAt: getNewExpirationTime(),
  };
};

function App() {
  const [thoughts, setThoughts] = useState([
    createThought("This is a place for your passing thoughts."),
    createThought("They'll be removed after 15 seconds."),
  ]);

  const addThought = (text) => {
    const thought = createThought(text);
    setThoughts((thoughts) => [thought, ...thoughts]);
  };

  const removeThought = (thoughtIdToRemove) => {
    setThoughts((thoughts) =>
      thoughts.filter((thought) => thought.id !== thoughtIdToRemove)
    );
  };
  
  // TODO: Upgrade this fallback component!
  const BlankThought = () => {
    return <p>Oops</p>;
  }

  return (
    <div className="App">
      <header>
        <h1>Passing Thoughts</h1>
      </header>
      <main>
        <AddThoughtForm addThought={addThought} />
        <ul className="thoughts">
          {thoughts.map((thought) => (
            <ErrorBoundary FallBackComponent={BlackThought}>
            <Thought
              removeThought={removeThought}
              key={thought.id}
              thought={thought}
            />
            </ErrorBoundary>
          ))}
        </ul>
      </main>
    </div>
  );
}

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

[mirja_t]

@arc9819962486

const BlankThought

@arc9819962486

<ErrorBoundary FallBackComponent={BlackThought}>

Do you notice the difference?

[arc9819962486]

Thanks for pointing that out! Unfortunately, when I corrected this the code still wouldn’t render.

[mtrtmk]

const createThought = (text) => {
  return {
    id: generateId(),
    text,
    expiresAt: getNewExpirationTime(),
  };
};

In the object being returned, shouldn’t there be a key for the text string? You have keys id and expiresAt, but no key for the text string being passed in as the argument to the function.

[mirja_t]

There is another typo in your code:

@arc9819962486

<ErrorBoundary FallBackComponent={BlackThought}>

From the instructions:

First, we need to set a FallbackComponent

Since ErrorBoundary is a component provided by the package react-error-boundary, the attribute names are predefined with a certain spelling (your camelCases are different).

@mtrtmk

In the object being returned, shouldn’t there be a key for the text string?

That is the shorthand syntax that you can apparently mix with the detailed syntax. The function has been provided by CC and has not been altered by the OP. The key will be text and the value will be whatever will be passed to the createThought function as an argument.

[mtrtmk]

@mirja_t

That is the shorthand syntax that you can apparently mix with the detailed syntax.

My mistake. You are correct.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#property_definitions

[arc9819962486]

Thank you! That fixed the problem. I’ll try to be more careful of typos.