CODEWITHSUNDEEP
javascriptnode.jsreactjsmaterial-ui
nismoa
nismoa

Reputation: 77

I try to use const useStyles in class component

Now, I doing a project with React Framework and Material-UI's library.

My templates from https://material-ui.com/getting-started/templates/ --> Sing In

I change component from function component to class component to use this.state. Because I want get values from keyboard. But I can't.

It's error

enter image description here

this is my code 

const useStyles = makeStyles(theme => ({
   root: {
      flexGrow: 1,
   },
}));

class Signin extends Component {
   constructor(props) {
       super(props);
       this.state = {
          username: "",
          password: "",
          redirectToReferrer: false,
          message: null
        }
   }
   render() {
      const { redirectToReferrer } = this.state;
      const { classes } = this.props;
      if (redirectToReferrer) return <Redirect to="/routebasic" />;
        return (
          <div className={classes.root}>
    }}
    Signin.propTypes = {
      classes: PropTypes.object.isRequired,
    };
    export default [connect(null, { ActSignin })(Signin),makeStyles(useStyles)(Signin)];

When I edit export default to

export default makeStyles(useStyles)(Signin);

It's still error.

Upvotes: 0

Views: 250

Answers (1)

DanCouper
DanCouper

Reputation: 850

Yes, it will error. There are (very hacky) ways to get hooks to work with classes, but you don't need to use a class just so that you can have state. It's much easier to just use a function component rather than trying to hack React.

I change component from function component to class component to use this.state. Because I want get values from keyboard.

As an example (I'm guessing here, because I don't know the context, and I've split out the object rather than keeping it as a single value):

const Signin = ({ classes }) => {
   const [username, setUsername] = React.useState("kmitlclinic01");
   const [password, setPassword] = React.useState("54788");
   const [redirectToReferrer, setRedirectToReferrer] = React.useState(false);
   const [message, setMessage] = React.useState("kmitlclinic01");

   if (redirectToReferrer) return <Redirect to="/routebasic" />;
   return (
     <div className={classes.root}>
       {/* I assume some stuff goes here? */}
     </div>
   );
}

export default [connect(null, { ActSignin })(Signin),makeStyles(useStyles)(Signin)];

Upvotes: 1

Related Questions