# Updating state in React search bar

**URL:** <https://forum.freecodecamp.org/t/updating-state-in-react-search-bar/163311>\
**Category:** General\
**Created:** [December 11, 2017, 7:55pm UTC](https://forum.freecodecamp.org/t/updating-state-in-react-search-bar/163311 "2017-12-11T19:55:43Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Nicknyr](https://avatars.discourse-cdn.com/v4/letter/n/c5a1d2/32.png) [@Nicknyr](https://forum.freecodecamp.org/u/Nicknyr)\
**Post date:** [December 11, 2017, 7:55pm UTC](https://forum.freecodecamp.org/t/updating-state-in-react-search-bar/163311/1 "2017-12-11T19:55:43Z")

</div>

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:

```auto
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](https://global.discourse-cdn.com/freecodecamp/original/3X/b/6/b60006182d2adf7c3e401664e273d2695ec43689.png)

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

---

<div class="post-metadata">

**Author:** ![JohnL3](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/johnl3/32/16459_2.png) [@JohnL3](https://forum.freecodecamp.org/u/JohnL3)\
**Post date:** [December 11, 2017, 8:12pm UTC](https://forum.freecodecamp.org/t/updating-state-in-react-search-bar/163311/3 "2017-12-11T20:12:35Z")

</div>

watch this video here it should help you with your problem even though its slightly different to what you are trying to do  
https://www.youtube.com/embed/IK9k9hSuYeA?feature=oembed&wmode=opaque&list=PL55RiY5tL51oyA8euSROLjMFZbXaV7skS

---

<div class="post-metadata">

**Author:** ![ncaron](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ncaron/32/65941_2.png) [@ncaron](https://forum.freecodecamp.org/u/ncaron)\
**Post date:** [December 12, 2017, 6:46am UTC](https://forum.freecodecamp.org/t/updating-state-in-react-search-bar/163311/4 "2017-12-12T06:46:31Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Dereje1](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/dereje1/32/63598_2.png) [@Dereje1](https://forum.freecodecamp.org/u/Dereje1)\
**Post date:** [December 12, 2017, 8:47am UTC](https://forum.freecodecamp.org/t/updating-state-in-react-search-bar/163311/5 "2017-12-12T08:47:33Z")

</div>

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](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

---

<div class="post-metadata">

**Author:** ![r1chard5mith](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/r1chard5mith/32/160542_2.png) [@r1chard5mith](https://forum.freecodecamp.org/u/r1chard5mith)\
**Post date:** [December 12, 2017, 10:53am UTC](https://forum.freecodecamp.org/t/updating-state-in-react-search-bar/163311/6 "2017-12-12T10:53:12Z")

</div>

You need what React calls a ‘controlled component’ - the docs are pretty good: [https://reactjs.org/docs/forms.html](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.

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [January 16, 2021, 11:33am UTC](https://forum.freecodecamp.org/t/updating-state-in-react-search-bar/163311/7 "2021-01-16T11:33:36Z")

</div>