Form input value not working after setting state

JavaScript
1 
import React from 'react';


class SearchBar extends React.Component{
    state = {term: ''};
    render() {
        return (
        <div className="ui segment">
            <form className="ui form">
                <div className = "field">
                <label>Image Search</label>
                <input 
                  type ="text"    value ={this.state.term}
               handleChange={e => this.setState({term: e.target.value })}
                    
                 /> 
                </div>
            </form>
        </div>
        );
    }

}
 
export default SearchBar;
1 Like
2

Hello there.

It is a small error: input does not have a handleChange prop/attribute. I think you are looking for onChange.

Hope this helps

3

i used onChange before using handleChange still not working

4

as
as1229×424 1.91 KB

cant type anything

5

Do you get any other errors?

The easiest thing would be to explicitly write out a typically class component:

class MyComp extends React.Component {
  constructor(props) {
    super(props);
    this.state = { term: '' };
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(e) {
    this.setState({term: e.target.value});
  }
  render() {
    return(
      <div>
        <input type="text" value={this.state.term} onChange={this.handleChange} />
      </div>
    );
  }
}

Try adding all that (and what you need). Sometimes the extra boilerplate is needed.

Hope this helps

1 Like
6

thanks refreshed and worked

7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.