Reputation: 167
I need import several functions to my component but I have this error:
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
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