Blank Thoughts

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(),
    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) => !== thoughtIdToRemove)
  // TODO: Upgrade this fallback component!
  const BlankThought = () => {
    return <p>Oops</p>;

  return (
    <div className="App">
        <h1>Passing Thoughts</h1>
        <AddThoughtForm addThought={addThought} />
        <ul className="thoughts">
          { => (
            <ErrorBoundary FallBackComponent={BlackThought}>

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

Do you notice the difference?

1 Like

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

const createThought = (text) => {
  return {
    id: generateId(),
    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.

There is another typo in your code:

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).

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.


My mistake. You are correct.

1 Like

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

1 Like

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