Как превратить этот класс, используя крючки

Question

Я работаю над проектом, использующим aws -amplify, и наткнулся на документы для усиления, чтобы взять файл пользователя и отобразить его. Я попытался изменить это на функциональный компонент и использовать хуки, но я в растерянности. Код ниже, спасибо за любые советы и помощь.

class ImageViewer extends Component {
  handleUpload(event) {
    const file = event.target.files[0];
    const path = file.name;
    Storage.put(path, file).then(() => this.setState({ path }));
  }

  render() {
    return (
      <div className="rounded-circle user-profile-img shadow p-3 mb-5 bg-white rounded">
        <div>
          {this.state && <S3Image path={this.state.path} />}
        </div>
        <input type="file" onChange={this.handleUpload.bind(this)} />
      </div>
    );
  }
}

Answer 1

const ImageViewer = () => {
  const [path, setPath] = React.useState('');

  const handleUpload = (event) => {
    const file = event.target.files[0];
    const path = file.name;
    Storage.put(path, file)
      .then(() => setPath(path));
  }

    return (
      <div className="rounded-circle user-profile-img shadow p-3 mb-5 bg-white rounded">
        <div>
          {path && <S3Image path={path} />}
        </div>
        <input type="file" onChange={handleUpload} />
      </div>
    );
}