convert functional component to class component in React js

Question

In my project I have used class components rather than functional components as I am getting all function components in every website. Can you help me to convert functional component to class component. And please help me to default the first value needed to select for giving multiple links.

This is the code sand box code https://codesandbox.io/s/material-demo-dt504

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import InputLabel from '@material-ui/core/InputLabel';
import MenuItem from '@material-ui/core/MenuItem';
import FormControl from '@material-ui/core/FormControl';
import Select from '@material-ui/core/Select';

const useStyles = makeStyles(theme => ({
  formControl: {
    margin: theme.spacing(1),
    minWidth: 120,
  },
  selectEmpty: {
    marginTop: theme.spacing(2),
  },
}));

export default function SimpleSelect() {
  const classes = useStyles();
  const [age, setAge] = React.useState('');

  const inputLabel = React.useRef(null);
  const [labelWidth, setLabelWidth] = React.useState(0);
  React.useEffect(() => {
    setLabelWidth(inputLabel.current.offsetWidth);
  }, []);

  const handleChange = event => {
    setAge(event.target.value);
  };

  return (
    <div>
     
      <FormControl variant="outlined" className={classes.formControl}>
        <InputLabel ref={inputLabel} id="demo-simple-select-outlined-label">
          Age
        </InputLabel>
        <Select
          labelId="demo-simple-select-outlined-label"
          id="demo-simple-select-outlined"
          value={age}
          onChange={handleChange}
          labelWidth={labelWidth}
        >
          <MenuItem value="">
            <em>None</em>
          </MenuItem>
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
      </FormControl>
    
    </div>
  );
}

can you please help me on default first value selected

Manu Panduu
– Manu Panduu

2020-03-11 12:55:53 +00:00
Commented Mar 11, 2020 at 12:55 — Manu Panduu
– Manu Panduu, Commented Mar 11, 2020 at 12:55

Drew Reese · Accepted Answer · 2020-03-12 06:14:43Z

useState hook: initial state is given to this.state in constructor and use this.setState to merge in key-value state update value pairs.

useEffect hook: with empty dependency array is roughly equivalent to componentDidMount lifecycle function, so move that logic there.

useRef hook: just use a standard react ref.

useStyles hook: keep the callback function consuming theme and use the withStyles HOC decorator.

import React, { Component, createRef } from "react";
import { withStyles } from "@material-ui/core/styles";
import InputLabel from "@material-ui/core/InputLabel";
import MenuItem from "@material-ui/core/MenuItem";
import FormControl from "@material-ui/core/FormControl";
import Select from "@material-ui/core/Select";

const useStyles = theme => ({
  formControl: {
    margin: theme.spacing(1),
    minWidth: 120
  },
  selectEmpty: {
    marginTop: theme.spacing(2)
  }
});

class SimpleSelect extends Component {
  constructor(props) {
    super(props);
    this.state = {
      age: "",
      labelWidth: 0
    };

    this.inputLabel = createRef();
  }

  componentDidMount() {
    this.setState({ labelWidth: this.inputLabel.current.offsetWidth });
  }

  handleChange = event => this.setState({ age: event.target.value });

  render() {
    const { age, labelWidth } = this.state;
    const { classes } = this.props;
    return (
      <div>
        <FormControl variant="outlined" className={classes.formControl}>
          <InputLabel
            ref={this.inputLabel}
            id="demo-simple-select-outlined-label"
          >
            Age
          </InputLabel>
          <Select
            labelId="demo-simple-select-outlined-label"
            id="demo-simple-select-outlined"
            value={age}
            onChange={this.handleChange}
            labelWidth={labelWidth}
          >
            <MenuItem value="">
              <em>None</em>
            </MenuItem>
            <MenuItem value={10}>Ten</MenuItem>
            <MenuItem value={20}>Twenty</MenuItem>
            <MenuItem value={30}>Thirty</MenuItem>
          </Select>
        </FormControl>
      </div>
    );
  }
}

export default withStyles(useStyles)(SimpleSelect);

joy08 · Accepted Answer · 2020-03-11 13:00:39Z

1

Hope this does the job for you

Some articles : https://www.digitalocean.com/community/tutorials/five-ways-to-convert-react-class-components-to-functional-components-with-react-hooks

Converting React function component to class component issue

EDIT

To select the first value, in your code pass the exact value like this
const [age, setAge] = React.useState("10");

import React from 'react';
import Button from '@material-ui/core/Button';
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';

export default class SimpleMenu extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      anchorEl: null
    };
  }

  handleClick = event => {
    this.setState({anchorEl: event.currentTarget});
  };

  handleClose = () => {
    this.setState({anchorEl: null});
  };

  render() {
    let { anchorEl } = this.state;
    return (
      <div>
        <Button
          aria-controls="simple-menu"
          aria-haspopup="true"
          onClick={this.handleClick}
        >
          Open Menu
        </Button>
        <Menu
          id="simple-menu"
          anchorEl={anchorEl}
          keepMounted
          open={Boolean(anchorEl)}
          onClose={this.handleClose}
        >
          <MenuItem onClick={this.handleClose}>Profile</MenuItem>
          <MenuItem onClick={this.handleClose}>My account</MenuItem>
          <MenuItem onClick={this.handleClose}>Logout</MenuItem>
        </Menu>
      </div>
    );
  }
}

edited Mar 11, 2020 at 13:00

answered Mar 11, 2020 at 12:52

joy08

9,6729 gold badges43 silver badges81 bronze badges

2 Comments

Manu Panduu Over a year ago

can you please help me on default first value selected

joy08 Over a year ago

check the sandbox codesandbox.io/s/material-demo-djgqs . Added the edit there.

Collectives™ on Stack Overflow

convert functional component to class component in React js

2 Answers 2

Comments

EDIT

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

EDIT

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related