loading...

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

mohammedasker profile image Mohammed Asker ・2 min read

[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);

myjoblist.js

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

navbar.js

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

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

Posted on by:

mohammedasker profile

Mohammed Asker

@mohammedasker

Front-end developer documenting my journey in coding • Anime fan • Bookworm • #100DaysOfCode challenger

Discussion

markdown guide
 
 

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

 

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.

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>
);