map is not a functionというエラー

Question

前提・実現したいこと

Reactで計算アプリを作っています。
オブジェクトの配列に対してmapメソッドを使おうとしたら、下記メッセージが出ました。

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

TypeError: incomeItems.map is not a function

該当のソースコード

IncomeExpense.js

import React from 'react';

export const IncomeExpense = (incomeItems, expenseItems ) => {

  const incomeAmounts = incomeItems.map(incomeItem => incomeItem.amount);
  
  const incomeTotal = incomeAmounts.reduce((acc, cur) => {
    return acc = acc + cur;
  });

  return (
    <div>
      <div>
        <h4>Income</h4>
        <p>{incomeTotal}</p>
      </div>
      <div>
        <h4>Expense</h4>
        <p>-5,000円</p>
      </div>
    </div>
  )
}

AddItem.js
こちらでstateをsetしています。

import React, { useState } from 'react';

export const AddItem = ({ inputText, setInputText, inputAmount, setInputAmount, incomeItems, setIncomeItems, expenseItems, setExpenseItems, type, setType}) => {


  const typeHandler = (e) => {
    setType(e.target.value)
    console.log(type)
  }

  const inputTextHandler = (e) => {
    setInputText(e.target.value);
    console.log(inputText)
  };

  const inputAmountHandler = (e) => {
    setInputAmount(e.target.value)
    console.log(inputAmount)
  }

  const submitItemHandler = (e) => {
    e.preventDefault();
    if ( type === 'inc' ) {
      setIncomeItems([
      ...incomeItems, {text: inputText, amount:inputAmount, id: Math.random() * 1000 }
      ]);
    } else if ( type === 'exp' ) {
      setExpenseItems([
        ...expenseItems, {text: inputText, amount:inputAmount, id: Math.random() * 1000 }
      ]);
    }
    console.log(incomeItems)
  }

  return (
    <>
      <form >
        <select onChange={typeHandler}>
          <option value="inc">＋</option>
          <option value="exp" >-</option>
        </select>
        <label>Text</label>
        <input type="text" placeholder="Text" value={inputText} onChange={inputTextHandler} />
        <label>Amount</label>
        <input type="number" placeholder="Value" value={inputAmount} onChange={inputAmountHandler} />
        <button type="submit" onClick={submitItemHandler}>Add</button>
      </form>
    </>
  )

} 

Home.js

import React, {useState} from 'react';
import { app } from "../firebase/Firebase";
import { Header } from './Header';
import { Balance } from './Balance';
import { IncomeExpense } from './IncomeExpense';
import { AddItem } from './AddItem';
import { ItemsList } from './ItemsList';

function Home (props) {

  const [inputText, setInputText] = useState("");
  const [inputAmount, setInputAmount] = useState(0);
  const [incomeItems, setIncomeItems] = useState([]);
  const [expenseItems, setExpenseItems] = useState([]);
  const [type, setType] = useState("inc");

  return (
    <div>
      <Header />
      <Balance />
      <IncomeExpense 
        incomeItems={incomeItems}
        expenseItems={expenseItems}
      />
      <AddItem
        inputText={inputText}
        setInputText={setInputText}
        inputAmount={inputAmount}
        setInputAmount={setInputAmount}
        incomeItems={incomeItems}
        setIncomeItems={setIncomeItems}
        expenseItems={expenseItems}
        setExpenseItems={setExpenseItems}
        type={type}
        setType={setType}
      />
      <ItemsList 
        incomeItems={incomeItems} 
        setIncomeItems={setIncomeItems} 
        expenseItems={expenseItems}
        setExpenseItems={setExpenseItems}
      />
      <button onClick={() => app.auth().signOut()}>log out</button>
    </div>
  )
}

export default Home;

試したこと

メインからincomeItemsをpropsとして渡しています。
オブジェクト配列なのに使えないのは何故でしょうか？

Comments

[hentaiman]

ソースはそれで全部ですか？

[miyabi_pudding]

引数、incomeItemsをコンソールで表示してみたりはしましたか？

[Kana-T]

関係するコンポーネントのソースコード全部記載しました。
ItemやItemlistなどは載せていません。

incomeItemsをAdditems.jsでconsole上チェックした時は、リストがArrayとして表示されました。

[miyabi_pudding]

ふむ・・・。

記法的に、CLIを使っているような気がするのですが、使っていますか？
そして、TypeScript開発ではないでしょうか？
であれば、引数の型をしっかり定義せねば、配列として扱ってもらえず、コンパイルでエラーが出る可能性はあります。

もしくは、その引数の元が、非同期取得で、コンソールでは中身を表示できても（console.logは少々処理が遅め）、
即時では中身がまだ入ってないため、処理ができない、とかの可能性です。

[Kana-T]

ありがとうございます！
TypeScriptはまだ使ったことはありません（いずれ使いたいです）
propsの渡し方で中カッコ{ }　がぬけてました。。。
こちらを修正したら動きました。ありがとうございました！

Answer 1

export const IncomeExpense = (incomeItems, expenseItems ) => {

  const incomeAmounts = incomeItems.map(incomeItem => incomeItem.amount);

↓

export const IncomeExpense = (props ) => {

  const incomeItems = props.incomeItems
  const expenseItems = props.expenseItems
  const incomeAmounts = incomeItems.map(incomeItem => incomeItem.amount);

※未検証

Comments

[Kana-T]

propsの渡し方で、({ ))中カッコを忘れていた為でした！！
解決しました・・ありがとうございます！