I'm getting the following error but haven't been able to identify why it is happening
warning.js:36 Warning: Searchbox is changing a controlled input of type text to be uncontrolled. Input elements should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component
I've got the following files:
- Searchbox.js
import React, { Component } from 'react';
class Searchbox extends Component {
// render method
render() {
const { value, onChange, onSubmit, children } = this.props
console.log(value)
console.log(onChange)
console.log(onSubmit)
console.log(children)
return (
<section className="search-section">
<form onSubmit={onSubmit}>
<input
type="text"
className="search-box"
value={value}
onChange={onChange}
/>
<button type="submit">{children}</button>
</form>
</section>
)
}
}
export default Searchbox
And the App.js file
import React, { Component } from 'react';
import Searchbox from './components/Searchbox'
//import logo from './logo.svg';
import './App.css';
const DEFAULT_TERM = 'High Fidelity'
class App extends Component {
// Constructor
constructor(props) {
super(props)
this.state = {
movie: null,
searchTerm: DEFAULT_TERM
}
this.onSearchSubmit = this.onSearchSubmit.bind(this)
this.onSearchChange = this.onSearchChange.bind(this)
}
// onSearchSubmit method
onSearchSubmit(e) {
e.preventDefault()
console.log("Searching movie with name" + this.status.searchTerm)
}
onSearchChange(e){
console.log(event.target.value)
this.setState({ searchTerm: event.target.value })
}
// render method
render() {
const { movie, searchTerm } = this.state
return (
<div className="App">
<Searchbox
value={searchTerm}
onChange={this.onSearchChange}
onSubmit={this.onSearchSubmit}
>Search
</Searchbox>
</div>
);
}
}
export default App;
On load everything's fine, but when I type something in the text field then the error is triggered.
Any suggestions?