props.setActiveTab is not a function hooks-CodePudding

I am passing state hooks as props to my components and my HeaderButton works perfectly fine but when I try implementing onPress I get an error saying "props.setActiveTab is not a function"

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

export default function Header(props) {
  const [activeTab, setActiveTab] = useState("Delivery");
  return (
    <View style={{ flexDirection: "row", alignSelf: "center"}}>
      <HeaderButton
        text="Delivery"
        bgColor="black"
        textColor="white"
        activeTab={activeTab}
        setActiveTab={activeTab}
      />
      <HeaderButton
        text="Pick up"
        bgColor="white"
        textColor="black"
        activeTab={activeTab}
        setActiveTab={activeTab}
      />
    </View>
  );
}

const HeaderButton = (props) => (
  
  <TouchableOpacity
    style={{
      backgroundColor: props.activeTab === props.text ? "black" : "white",
      paddingVertical: 10,
      paddingHorizontal: 40,
      borderRadius: 10,
    }}

    onPress={() => props.setActiveTab(props.text)}
  >
    <Text style={{ color: props.textColor }}>  {props.text}</Text>
  </TouchableOpacity>
);

CodePudding user response：

Because you are not passing the function here:

setActiveTab={activeTab}

change to:

setActiveTab={setActiveTab}