Updating state in React search bar

1

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:

Screenshot from 2017-12-11 14-54-17
Screenshot from 2017-12-11 14-54-172538×838 232 KB

currentText updates but it doesn’t display the value “Hey”. It just says currentText: “currentText”. How do I properly update the state?

3

watch this video here it should help you with your problem even though its slightly different to what you are trying to do

4

Seems like you’re passing the string ‘currentText’. That’s why it gets updated to that. I’m using my phone so it’s difficult to help but if I remember correctly you don’t need to pass anything. The event will be passed automatically and in your function you can call it whatever you like. ‘e’ in this example and in your setState you can do something like currentText: e.target.value

1 Like
5

I too am not in a convenient location and using my phone , but thought i’d chime in as well since I ran across this issue while making the book trading app, the relevant link is here https://github.com/Dereje1/Book-Trading/blob/master/src/components/books.js

In essence, I wanted to update a list box from google’s book api as the user was typing in the search box , and this was the solution I came up with , not sure it is the most efficient but it works

6

You need what React calls a ‘controlled component’ - the docs are pretty good: https://reactjs.org/docs/forms.html

You’ll need separate methods for onClick and onSubmit and it’s easier to bind ‘this’ in the constructor.