Next.js Discord

Discord Forum

Client Class Component

Unanswered
Atlantic mackerel posted this in #help-forum
Open in Discord
Atlantic mackerelOP
Hey guys, I just started nextjs
Im trying to make a component to use class with typescript but some error has been occured;
How Can I make a class component?


Below is my code

Button Comp
import React, { Component } from 'react';

interface ButtonProps {}

interface ButtonState {
  count: number;
}

class Button extends Component<ButtonProps, ButtonState> {
  constructor(props: ButtonProps) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  handleIncrement = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={this.handleIncrement}>Click me</button>
      </div>
    );
  }
}

export default Button;


Page 

import Image from 'next/image'
import Button from './components/button/button'


function Home() {
  return (
    <>
      {/* Your other components */}
      <Button />
    </>
  );
}

export default Home;


Error

./app/components/button/button.tsx
ReactServerComponentsError:

You’re importing a class component. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.
Learn more: https://nextjs.org/docs/getting-started/react-essentials#client-components

Maybe one of these should be marked as a client entry with "use client":
  ./app/components/button/button.tsx
  ./app/page.tsx

43 Replies

European sprat
Try adding use client to the button component
Atlantic mackerelOP
use client this?
@European sprat Try adding use client to the button component
Atlantic mackerelOP
I tried this 
`use client`
import React, { Component } from 'react';

interface ButtonProps {}

interface ButtonState {
  count: number;
}

class Button extends Component<ButtonProps, ButtonState> {
  constructor(props: ButtonProps) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  handleIncrement = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={this.handleIncrement}>Click me</button>
      </div>
    );
  }
}

export default Button;

But same
Error
./app/components/button/button.tsx ReactServerComponentsError: You’re importing a class component. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default. Learn more: https://nextjs.org/docs/getting-started/react-essentials#client-components Maybe one of these should be marked as a client entry with "use client": ./app/components/button/button.tsx ./app/page.tsx
seems like what you have should work but i don't really know
any reason you're using class components?
Giant panda
I think class components need to have parents that use them be marked as client components not the class itself. Seems like a restriction for legacy code.
You really shouldn’t use class components in the first place.
Thank uuu
@Atlantic mackerel Soo components cannot use class?
Asian black bear
They have not been idiomatic React for a pretty long time, and any support remaining is reserved for "legacy" codebases. If you are learning, paying attention to function components and hooks is a much better time investment.
@Asian black bear They have not been idiomatic React for a pretty long time, and any support remaining is reserved for "legacy" codebases. If you are learning, paying attention to function components and hooks is a much better time investment.
Atlantic mackerelOP
Thank u for advise, As an Java developer I want use class in components 🙂 function component not familiar for me
@Atlantic mackerel Is function better than class?
Asian black bear
You could probably argue either way conceptually, but for the case of React the devs have chosen functional components, so yes, for React functional componetns are better.
As a Java developer you probably have a lot of expectations about what classes will do, and in the JS world you will find them to be entirely bizarre and useless.
@Asian black bear As a Java developer you probably have a lot of expectations about what classes will do, and in the JS world you will find them to be entirely bizarre and useless.
Atlantic mackerelOP
YeahhThe syntax and Libs are so familiar to me,

What about const component? Is it use often?
@Atlantic mackerel YeahhThe syntax and Libs are so familiar to me, What about const component? Is it use often?
Asian black bear
I am not sure what you mean? Like function stuff() vs const stuff=()=>{}?
@Asian black bear I am not sure what you mean? Like `function stuff()` vs `const stuff=()=>{}`?
Atlantic mackerelOP
Yeah I mean The latter
Asian black bear
for 99.99999999% of the time it makes absolutely no difference
Atlantic mackerelOP
Ahh Just Code Style
Asian black bear
because this is not a preferred JS feature to use these days anyways
@Asian black bear because `this` is not a preferred JS feature to use these days anyways
Atlantic mackerelOP
The "This" is const?
Asian black bear
Arrow functions do not have this defined, it is their weird thing. I would describe this as a global, not a constant
Atlantic mackerelOP
Ahhh
I got it
Asian black bear
but remember functions are first class, so this is also valid 
const funny = function FunnyFunction() {console.log('hello world')}
const funny2 = function () {console.log('hello world')}
const funny3 = () => {console.log('hello world')}
but FunnyFunction() is not defined
but helpfully
Asian black bear
the point I am trying to make here. In JS class objects are really just plain old objects, and there are no private/protected fields or functions. Methods are literally just functions assigned to object properties using the this keyword to get other properties of the object.
Defining a class only sets the object prototype which is a template.
think of a Java class, but everyone uses introspection to change everything
@Atlantic mackerel It's gonnabe problem in a big project
Asian black bear
Not really, especially with TS, but projects simply are organized differently not inferiorly
closures are the only "safe" place to put data
@Asian black bear Not really, especially with TS, but projects simply are organized differently not inferiorly
Atlantic mackerelOP
ah it wasn't mean inferior than Java I was just in confused about "What's different btw function & const"
Asian black bear
ohhh
yeah, kind of the big actual difference relates to this at the file level: https://developer.mozilla.org/en-US/docs/Glossary/Hoisting
although for any kind of inline/anonymous function it is going to require the expression-style syntax that returns a reference to the function
@Asian black bear although for any kind of inline/anonymous function it is going to require the expression-style syntax that returns a reference to the function
Atlantic mackerelOP
Yeah That's exactly what I mean That's gonna be problem in huge project
@Atlantic mackerel Yeah That's exactly what I mean That's gonna be problem in huge project
Asian black bear
Ahh, you are going to have a fun time learning JS. I came from Java too, and it really grew on me.
Spectacled bear
import React, { Component } from 'react';

interface ButtonProps {}

interface ButtonState {
count: number;
}

@useClient
class Button extends Component<ButtonProps, ButtonState> {
constructor(props: ButtonProps) {
super(props);
this.state = {
count: 0,
};
}

handleIncrement = () => {
this.setState({ count: this.state.count + 1 });
};

render() {
return (
<div>
<p>You clicked {this.state.count} times</p>
<button onClick={this.handleIncrement}>Click me</button>
</div>
);
}
}

export default Button;
@Asian black bear Ahh, you are going to have a fun time learning JS. I came from Java too, and it really grew on me.
Atlantic mackerelOP
Plus, The reason of why that I keep using class in nextJs(With Typescript) is I think if can't capsulize to class component, it's worthless to use typescript
Soo Yeah, THat's why I want to use class component