使用状态语法后找不到模块

Question

I am getting the following error in my browser console:

Uncaught Error: Cannot find module "./components/search_bar"

I am learning ReactJS and upon working on creating a very simple component, I stumbled upon the above error. It occurred after applying the state syntax in my SearchBar class/component. I am simply seeking on some enlightenment towards what is wrong, because I am not able to identify this after revising my code.

Please reference the below code:

search_bar.js

import React, {Component} from 'react';

class SearchBar extends Component {
    constructor(props){
        super(props);
        this.state = {term: ""};
    }

    render(){
        return (
            <div>
                <input onChange={
                    event => this.setState({
                        term: event.target.value;
                    })
                }/>
                Value of input: {this.state.term}
            </div>
        );
    }
}

export default SearchBar;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import SearchBar from './components/search_bar';

const App = () => {
    return (
        <div>
            <SearchBar />
        </div>
    );
}

ReactDOM.render(<App />, document.querySelector(".container"));

Answer 1

fix the syntax error, (semicolon). also assign the value of your state to the input

<input 
  onChange={ event => this.setState({term: event.target.value}) }
  value={this.state.term}/>