Trying to make the onChange event of the following componenet to fire but it does not. When I type in the seach box nothing is printed on the console. No change is fired
const Search = () => {
let history = useHistory()
const [search, setSearch] = useState('')
const handleSubmit = (e) => {
e.preventDefault()
if (search) {
console.log("typing..")
history.push(`/?search=${search}`)
} else {
history.push(history.push(history.location.pathname))
}
}
return (
<Form.Group controlId='searchbox' onSubmit={handleSubmit}>
<Form.Control
className="auth-input"
type='text'
placeholder="Search..."
onChange={(e) => setSearch(e.target.value)}
>
</Form.Control>
<Button type='submit'>Submit</Button>
</Form.Group>
)
}
export default Search
const Home =()=>{
return (<div><Search /><div>)
}
export default Home I still can't identify where the error is. How do I get it working?
I am assuming Form.Control is a custom control or a third-party control, hence you cannot convert it to a controlled input. You could try creating a ref and get the value from the ref in the onChange event handler. If the custom control is not a third party control, then you could add the onChange handler inside the Form.Control component and pass a function reference to the control.
Edit:
Here is your solution : https://codesandbox.io/s/vigorous-mclean-4jusl?file=/src/App.js
In case you see an error in the sandbox, refresh the page. There seems to be some error with codesandbox.
Explanation:
Create a ref to access the input using useRef:
const controlref = useRef();
Pass the ref to the control:
<Form.Control
onChange={handleChange}
**ref={controlref}**
type="text"
placeholder="search..."
/>
Get the value in onChange using the ref:
const handleChange = (e) => {
console.log(controlref.current.value);
setSearch(controlref.current.value);
};
Firstly, html "input" is a self closing element.
Secondly, You have missed the "value" inside the Input component.
Your code:
<Form.Control
className="auth-input"
type='text'
placeholder="Search..."
onChange={(e) => setSearch(e.target.value)}
></Form.Control>
Solution:
<Form.Control
className="auth-input"
type='text'
placeholder="Search..."
onChange={(e) => setSearch(e.target.value)}
value={search}
/>
Try using event onInput instead:
<Form.Control
className="auth-input"
type='text'
placeholder="Search..."
onInput={(e) => setSearch(e.target.value)}
/>