AGE AGE - 7 months ago 42
Javascript Question

Cannot find module after using state syntax

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

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}/>