garage-box/src/BucketList.tsx

import React from 'react';
import { Link } from 'react-router-dom';
import { S3Client, ListBucketsCommand } from '@aws-sdk/client-s3';

type Props = {
  client: S3Client;
};

type State = {
  buckets: string[];
};

class BucketList extends React.Component<Props, State> {
  state = {
    buckets: [],
  };

  async componentDidMount() {
    let command = new ListBucketsCommand({});
    try {
      const data = await this.props.client.send(command);
      console.log("ok", data);
      const buckets = (data.Buckets || []).map((b) => (b.Name || 'aza'));
      this.setState({buckets: buckets});
    } catch(error) {
      console.log("err", error);
    }
  }

  render() {
    return (
      <ul>
        { this.state.buckets.map((b) =>
          <li key={ b }><Link to={ "/" + b }>{ b }</Link></li>
        )}
      </ul>
    );
  }

}

export default BucketList;