Why is the page blank?

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?

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

Uncaught TypeError: this is undefined

Vibe vibes.jsx:7

React 16



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 */}

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

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