[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
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.
(0 , _customhooks.default) is not a function
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
error message on the web page and the console is pointing to the
(0 , _customhooks.default) is not a functionNewList
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)
The
customhooks.js
file is empty?Oh, I forgot to add it. I've updated it just now.
Does the error still exist??
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})