TypeError:X is not a function. (In 'X', 'X' is an instance of Object)の解決の方法

Question

前提・実現したいこと

React Nativeを利用してアプリを開発しています。

Buttonコンポーネントを押す度に、同じButtonコンポーネントが増えて表示される動きをさせたいです。

しかし、Buttonを押すと、下記のエラーが発生して目的の動きができません。

対策の方法について、ご存知の方折りましたら、ご教授いただけないでしょうか？

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

TypeError: handleAdd is not a function. (In 'handleAdd()', 'handleAdd' is an instance of Object)

createReactClass$argument_0.touchableHandlePress
    TouchableOpacity.js:264:45
touchableHandlePress
    [native code]:0
TouchableMixin._performSideEffectsForTransition
    Touchable.js:880:34
_performSideEffectsForTransition
    [native code]:0
TouchableMixin._receiveSignal
    Touchable.js:779:44
_receiveSignal
    [native code]:0
TouchableMixin.touchableHandleResponderRelease
    Touchable.js:490:24
touchableHandleResponderRelease
    [native code]:0
forEach
    [native code]:0
callFunctionReturnFlushedQueue
    [native code]:0

該当のソースコード

import React, { useState } from "react";
import { View, Button } from "react-native";

function Item(handleAdd) {
  return (
    <View>
      <Button
        title="追加"
        onPress={() => {
          handleAdd();
        }}
      />
    </View>
  );
}

export default function TestStateArray() {
  const [counter, setCounter] = useState(1);

  function handleAdd() {
    setCounter((v) => v + 1);
  }

  return (
    <View>
      {[...Array(counter).keys()].map((i) => (
        <Item handleAdd={handleAdd} key={i} />
      ))}
    </View>
  );
}

補足情報（FW/ツールのバージョンなど）

node : 12.18.3
react native : 4.10.1
expo : 3.22.3

Answer 1

function Item(handleAdd)
ここの書き方に間違いがありました。

正しくは、

function Item({handleAdd})
でした。