2020-12-31

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

No comments:

Post a Comment