I am trying to convert all the components of my class into functional components. How can I convert this class component into a functional component?

 export default class  Login extends Component {
  state ={
    email:'',
    password:''
   }

  handleChange = (key) => (value)=>{
    this.setState({[key]: value});
    console.log(this.setState);
  };
  

  state = {value: 1}
  render(){
    const{email}=this.state
    const {value} = this.state;
    const setValue = value => this.setState({value})

    const handleChangge = (event, newValue) => {
      setValue(newValue);
    };

    return (
    * some thing*
  }
}

CodePudding user response：

import React, { useState } from 'react';

const initialState = { email: '', password: '' };

function Login() {
  const [state, setState] = useState(initialState);
  const { email, value } = state;

  const setValue = (value) => setState({ ...state, value });

  const handleChangge = (event, newValue) => {
    setValue(newValue);
  };
  return <div>Login</div>;
}

export default Login;