DocsErrorsReact Class component rendered in a Server Component

React Class component rendered in a Server Component

Why This Error Occurred

You are rendering a React Class Component in a Server Component, React.Component and React.PureComponent only works in Client Components.

Use a Function Component.

app/page.js

export default class Page extends React.Component {
  render() {
    return <p>Hello world</p>
  }
}

app/page.js

export default function Page() {
  return <p>Hello world</p>
}

Mark the component rendering the React Class Component as a Client Component by adding 'use client' at the top of the file.

app/page.js

export default class Page extends React.Component {
  render() {
    return <p>Hello world</p>
  }
}

app/page.js

'use client'
 
export default class Page extends React.Component {
  render() {
    return <p>Hello world</p>
  }
}

Was this helpful?