Monsterチャレンジ

週末タスク(平日に完了するタスク)

🥝 Task 1. コールAPI

componentDidMount()

fetch()

setState()

🥝 Task 2. 結果値propsをサブAPI呼び出しに渡す

props

class CardList extends Component {
  render() {
    const { monsters } = this.props;
    console.log(this.props);
    
  }
}

export default CardList;

ポストコンソールを実装します.データ入力が正しいことをlogで確認します.

🥝 Task 3. Array.map()の使用

map()

props

class CardList extends Component {
  render() {
    const { monsters } = this.props;

    return (
      <>
        <div className="card-list">
          {monsters.map((monster, key) => {
            return <Card key={key} id={monster.id} name={monster.name} email={monster.email} />;
          })}
        </div>
      </>
    );
  }
}

export default CardList;

🥝 Task 4. 利用する

class Card extends Component {
  render() {
    return (
      <div className="card-container">
        <img src={`https://robohash.org/${this.props.id}?set=set2&size=180x180`} alt={this.props.id} />
        <h2>{this.props.name}</h2>
        <p>{this.props.email}</p>
      </div>
    );
  }
}

export default Card;

👇🏻結果