JGPcode
JGPcode

Reputation: 167

TypeError is not a function (export function)

I need import several functions to my component but I have this error: enter image description here

Thank you very much guys for your help.

SearchFoodFunctions.js

 function allDelete(setArrFoods, setColumns, uuid) {
  setArrFoods([]);

  setColumns({
    [uuid()]: {
      name: "Breakfast",
      items: [],
    },
    [uuid()]: {
      name: "Lunch",
      items: [],
    },

    [uuid()]: {
      name: "Dinner",
      items: [],
    },
  });
}

export { allDelete };

component SearchFood:

import {allDelete} from "../../functions/SearchFoodFunctions"

const SearchFood = () => {
  const {
    arrFoods,
    setArrFoods,
    inputProt,
    inputLip,
    inputCarb,
    columns,
    setColumns,
    foodDatabase,
    showSnack,
  } = useContext(UserContext);

return(
<>
            <button
              className=" btn btn-danger ms-3 "
              type="button"
              onClick={allDelete}
             >
              All Delete
            </button>
</>
)

component App.js ( function setArrFoods is exported with UserContext )

  const [arrFoods, setArrFoods] = useState([]);

Upvotes: 0

Views: 1431

Answers (1)

Shubham Khatri
Shubham Khatri

Reputation: 281626

You are not passing any arguments to allDelete apart from the event object. In order to pass custom arguments you can modify your handler like below

import {allDelete} from "../../functions/SearchFoodFunctions"
import uuid from 'uuid';
const SearchFood = () => {
  const {
    arrFoods,
    setArrFoods,
    inputProt,
    inputLip,
    inputCarb,
    columns,
    setColumns,
    foodDatabase,
    showSnack,
  } = useContext(UserContext);

const handleAllDelete = (e) => {
   allDelete(setArrFoods, setColumns, uuid)
}
return(
<>
            <button
              className=" btn btn-danger ms-3 "
              type="button"
              onClick={handleAllDelete}
             >
              All Delete
            </button>
</>
)

Upvotes: 1

Related Questions