DEV Community

Mohammed Asker
Mohammed Asker

Posted on

React Hooks: (0 , _customhooks.default) is not a function

[Update]: I have forgotten to include the CustomHooks component and the error has disappeared. Now the problem is the input values are not rendering in MyJobList component.

The issue
In my React project, I'm getting TypeError
(0 , _customhooks.default) is not a function
error when I pass the props to the components. It is possible that I am passing the data incorrectly, or perhaps I am missing some bits of codes.

Here are the codes (I have minimized the codes to highlight the main problem. You can view my full codes in the link below):

newlist.js

const NewList = () => {
  const [inputState, setInputState] = useState({});
  const onSubmitList = () => {
    setInputState({
      positionTitle: `${inputs.positionTitle}`,
      companyName: `${inputs.companyName}`,
      jobLink: `${inputs.jobLink}`
    });
  };

  const { inputs, handleInputChange, handleSubmit } = CustomForm(onSubmitList);
Enter fullscreen mode Exit fullscreen mode

myjoblist.js

const MyJobList = inputs => (
  <div>
    <h3>{inputs.positionTitle}</h3>
    <p>{inputs.companyName}</p>
    <p>{inputs.jobLink}</p>
  </div>
);
Enter fullscreen mode Exit fullscreen mode

navbar.js

const Navbar = inputState => (
  <Router>
    <Switch>
      <Route path="/my-list">
        <MyJobList inputs={inputState} />
      </Route>
    </Switch>
  </Router>
);
Enter fullscreen mode Exit fullscreen mode

What do I expect?
In the NewList component, I can create a new job list by entering the inputs and when I submit it, the input values should be rendered on the MyJobList component.

What's actually happening?
I am getting TypeError
(0 , _customhooks.default) is not a function
error message on the web page and the console is pointing to the NewList component. In my local environment, I don't have this error, however, nothing is rendering when I submitted the input entry.

Things I tried
I tried to remove the object restructuring (curly braces, in other words) in the parameters. I also tried googling the problem but it does not lead me to the solution.

Any help and guidance provided are greatly appreciated!

Here's a link to complete code: Code Sandbox

Top comments (5)

Collapse
 
hangindev profile image
Jason Leung 🧗‍♂️👨‍💻 • Edited

The customhooks.js file is empty?

Collapse
 
mohammedasker profile image
Mohammed Asker

Oh, I forgot to add it. I've updated it just now.

Collapse
 
hangindev profile image
Jason Leung 🧗‍♂️👨‍💻

Does the error still exist??

Thread Thread
 
mohammedasker profile image
Mohammed Asker

No, the error has disappeared and I can see the elements. Now the real problem I'm facing is I cannot render the submitted input values from NewList component into the MyJobList component.

Thread Thread
 
jakeerc profile image
Jakeer

Destructure the props in MyJobList component properly in ({ prop})

const MyJobList = ({inputs}) => (
  <div>
    <h3>{inputs.positionTitle}</h3>
    <p>{inputs.companyName}</p>
    <p>{inputs.jobLink}</p>
  </div>
);