Working on a search bar and attempting to update the state of the text in the search as the user types in it. I then want to send the text in an API request to a movie database.
For example, if the user types in “The Matrix” I want to update the state of the search to The Matrix and then plop that title into an API request and pull up the data from the API.
How would I update the state in the search component? I’ve tried this:
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
export default class Searchbar extends Component {
constructor(props) {
super(props);
this.state = {
initialState: "Search for movies, shows, actors, etc...",
currentText: " "
}
}
changeText(currentText) {
this.setState({currentText});
//console.log({currentText});
}
render() {
return (
<div>
<div class="theater">
<img src={'movie_theater3.jpg'} alt={"Theater"} class="theater_background" height="550px" width="100%" />
</div>
<div class="search-box">
<form>
<input type="text" placeholder={this.state.initialState} onChange={this.changeText.bind(this, 'currentText')} />
<button onClick={this.changeText.bind(this, 'currentText')}>Search</button>
</form>
</div>
</div>
);
}
}
<form>
<input type="text" placeholder={this.state.initialState} onChange={this.changeText.bind(this, 'currentText')} />
<button onClick={this.changeText.bind(this, 'currentText')}>Search</button>
</form>
</div>
</div>
);
}
}
This is the result:
currentText updates but it doesn’t display the value “Hey”. It just says currentText: “currentText”. How do I properly update the state?