Why is the page blank?

Coding Help
,
1

i’m making a website to upload my stories. it will take text files and convert them into various interactive formats.
i made a React component called vibe, which is a window that will display the stories. the second i imported it into home.jsx, the screen went blank. there were no errors thrown, and the only thing i changed was importing vibes.jsx and using the tag. any help?
website

2

here’s what I’m seeing in my browser console

Uncaught TypeError: this is undefined

Vibe vibes.jsx:7

React 16

index.jsx:5

vibes.jsx:7:7

The above error occurred in the component: Vibe@https://inky-zenith-mockingbird.glitch.me/src/vibes.jsx:19:61 Home App Consider adding an error boundary to your tree to customize error handling behavior. Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

and that part of the code

    return (
    <div className="vibe">
      {this.props.content} {/* line 7 */}
      </div>
    );

which apparently https://reactjs.org/docs/components-and-props.html#function-and-class-components your code was a mix of code from a “class component” and the declaration of a “function component”

1 Like