i have the code for photo uploader below in class based reactjs code and i want it in functional based working code

Question

i am new to react . i have the code for photo uploader below in class based reactjs code and its working but i want it in react functional based working code. if there is any other suggestion for the same project to with much proper and cleaner code then i would appreciate it.

the code is below:

import React, { Component } from 'react';
import './App.css';
export class App extends Component {
  state={
    profileImg:'https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_960_720.png'
  }
  imageHandler = (e) => {
    const reader = new FileReader();
    reader.onload = () =>{
      if(reader.readyState === 2){
        this.setState({profileImg: reader.result})
      }
    }
    reader.readAsDataURL(e.target.files[0])
  };
    render() {
    const { profileImg} = this.state
        return (
            <div className="page">
                <div className="container">
                    <h1 className="heading">Add your Image</h1>
                    <div className="img-holder">
                        <img src={profileImg} alt="" id="img" className="img" />
                    </div>
                    <input type="file" accept="image/*" name="image-upload" id="input" onChange={this.imageHandler} />
                    <div className="label">
          <label className="image-upload" htmlFor="input">
                        <i className="material-icons">add_photo_alternate</i>
                        Choose your Photo
                    </label>
          </div>
                </div>
            </div>
        );
    }
}

export default App;

i want the working functional react based component code. i want that photo uploader integrated in my project.

Answer 1

import React, { useState } from "react";
import "./App.css";

export default function App() {
  const [profileImage, setProfileImage] = useState(
    "https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_960_720.png"
  );

  const imageHandler = (e) => {
    const reader = new FileReader();
    reader.onload = () => {
      if (reader.readyState === 2) {
        setProfileImage(reader.result);
      }
    };
    reader.readAsDataURL(e.target.files[0]);
  };

  return (
    <>
      <div className="page">
        <div className="container">
          <h1 className="heading">Add your Image</h1>
          <div className="img-holder">
            <img src={profileImage} alt="" id="img" className="img" />
          </div>
          <input
            type="file"
            accept="image/*"
            name="image-upload"
            id="input"
            onChange={imageHandler}
          />
          <div className="label">
            <label className="image-upload" htmlFor="input">
              <i className="material-icons">add_photo_alternate</i>
              Choose your Photo
            </label>
          </div>
        </div>
      </div>
    </>
  );
}

checkout this blog React functional Component