How to convert component with many states to react functions

Question

With the help of code and example can u tell me How to convert component with many states to react functions?

Answer 1

When converting a class component with multiple states to a functional component, the best approach is to replace this.state with multiple useState hooks.

Example:

import React, { useState } from "react";

const UserProfile = () => {

  const [name, setName] = useState("Alice");

  const [age, setAge] = useState(25);

  const [email, setEmail] = useState("alice@example.com");

  const updateProfile = () => {

    setName("Bob");

    setAge(30);

  };

  return (

    <div>

      <h2>Name: {name}</h2>

      <p>Age: {age}</p>

      <p>Email: {email}</p>

      <button onClick={updateProfile}>Update Profile</button>

    </div>

  );

};

export default UserProfile;