TypeError: Object(...) is not a function after refactoring from class to function component
I just refactored a legacy React 16.6.3 app from having a class-based SearchBar
component to a function component like so:
import React, { useState } from 'react';
const SearchBar = ({ onFormSubmit }) => {
const [term, setTerm] = useState('');
const onSubmit = (event) => {
event.preventDefault();
onFormSubmit(term);
};
return (
<div className="search-bar ui segment">
<form onSubmit={onSubmit} className="ui form">
<div className="field">
<label>Video Search</label>
<input
type="text"
value={term}
onChange={(event) => setTerm(event.target.value)}
/>
</div>
</form>
</div>
);
};
export default SearchBar;
I do not see anything wrong with my code, it should work as expected even if I have yet to refactor the App
component from class to function component. I am importing the SearchBar
like so:
import React from "react";
import SearchBar from "./SearchBar";
import youtube from "../apis/youtube";
import VideoList from "./VideoList";
import VideoDetail from "./VideoDetail";
class App extends React.Component {
state = { videos: [], selectedVideo: null };
componentDidMount() {
this.onTermSubmit("JavaScript");
}
What gives here, I cannot detect where I made the error. Here is the exact error:
TypeError: Object(...) is not a function
SearchBar
src/components/SearchBar.js:3
1 | import React, { useState } from 'react';
2 |
> 3 | const SearchBar = ({ onFormSubmit }) => {
4 | const [term, setTerm] = useState('');
5 |
6 | const onSubmit = (event) => {
View compiled
▶ 22 stack frames were collapsed.
Module../src/index.js
src/index.js:5
2 | import ReactDOM from 'react-dom';
3 | import App from './components/App';
4 |
> 5 | ReactDOM.render(<App />, document.querySelector('#root'));
6 |
View compiled
from Recent Questions - Stack Overflow https://ift.tt/3rJm1Fc
https://ift.tt/eA8V8J
Comments
Post a Comment