TypeError: resources.map is not a functionというエラーを解消したい

Question

前提・実現したいこと

axiosを使用して非同期でデータを取ってきて、羅列したい

発生している問題・エラーメッセージ

TypeError: resources.map is not a function

該当のソースコード

ConnectingToAPIコンポーネント

import React, { useState } from "react";

import { Button } from "../core/Button/Button";
import { Resources } from "../core/Resources/Resources";
import jsonplaceholder from "../../apis/jsonplaceholder";

export const ConnectingToApi = () => {
  const [resources, setResources] = useState([]);

  const getPosts = async () => {
    try {
      const posts = await jsonplaceholder.get("/posts");
      setResources(posts.data);
    } catch (err) {
      console.log(err);
    }
  };

  const getAlbums = async () => {
    try {
      const albums = await jsonplaceholder.get("/albums");
      setResources(albums.data);
    } catch (err) {
      console.log(err);
    }
  };

  return (
    <>
      <Button onClick={getPosts} value="posts" />
      <Button onClick={getAlbums} value="albums" />
      <Resources resources={resources} />
    </>
  );
};

Resourcesコンポーネント

import React from "react";

export const Resources = (resources) => {
  console.log(resources);
  return (
    <>
      {resources.map((resource) => (
        <p key={resource.id}>{resource.title}</p>
      ))}
    </>
  );
};

BUTTONコンポーネント

import React from "react";
import styled, { css } from "styled-components";

export const Button = ({ onClick, value, isDisabled }) => {
  return (
    <>
      <StyledButton isDisabled={isDisabled} onClick={onClick}>
        {value}
      </StyledButton>
    </>
  );
};

const StyledButton = styled.button`
  ${({ isDisabled }) =>
    isDisabled &&
    css`
      opacity: 0.3;
      pointer-events: none;
    `}
`;

試したこと

console.logでresoucesの内容を確認arrayになっている_proto_もあり。以下画像添付

ここにより詳細な情報を記載してください。

Answer 1

以下で解決するかと

import React from "react";

export const Resources = (props) => {
 const { resources } = props
  return (
    <>
      {resources.map((resource) => (
        <p key={resource.id}>{resource.title}</p>
      ))}
    </>
  );
};

Answer 2

Reactコンポーネントに渡すpropは、{resources: [....]}のようなオブジェクトとして渡されます。

Resources = ({resources}) =>のように引数を分割代入してしまうのが手っ取り早いです。