I have this file Foo.js:
const Foo= ({ someArg }) => {
alert(someArg);
};
export default Foo;
I am calling it from App.js:
function App() {
useEffect(() => {
Foo("text");
}, []);
...
The function gets called, but the alert shows undefined
instead of the actual value that was passed. How do I properly pass arguments to a function in another file?
CodePudding user response:
Problem is you are destructuring a string which doesn't have a property called someArg
. That's why undefined
is displayed.
Correct Way:
const Foo= (someArg) => { // No destructuring
alert(someArg);
};
export default Foo;
function App() {
useEffect(() => {
Foo("text"); // You are passing a string
}, []);
const Foo= ({ someArg }) => { // Doing destructuring
alert(someArg);
};
export default Foo;
function App() {
useEffect(() => {
Foo({someArg: "text"}); // You are passing an object
}, []);
Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment