What is the purpose of passing props to a React search bar?

Question

I'm learning to Think in React, but don't understand why the SearchBar in the example needs to have value={this.props.filterText} and checked={this.props.inStockOnly}, the jsFiddle still works without them and it doesn't make sense for props to be passed to the SearchBar as the Search is the one handling user input and making changes to the state. The user input will be reflected in the value of the input without it being set to this.props.filterText so why is it there?

var SearchBar = React.createClass({
  handleChange: function() {
    this.props.onUserInput(
      this.refs.filterTextInput.value,
      this.refs.inStockOnlyInput.checked
    );
  },
  render: function() {
    return (
      <form>
        <input
          type="text"
          placeholder="Search..."
          value={this.props.filterText}
          ref="filterTextInput"
          onChange={this.handleChange}
        />
        <p>
          <input
            type="checkbox"
            checked={this.props.inStockOnly}
            ref="inStockOnlyInput"
            onChange={this.handleChange}
          />
          {' '}
          Only show products in stock
        </p>
      </form>
    );
  }
});

You make a great point. The example is confusing, however it would still be useful to have the props there incase you wanted to instantiate the SearchBar with default value from the parent like `` — azium, Oct 06 '16 at 02:51

score 1 · Answer 1 · edited Oct 06 '16 at 10:35

1

React has concept of controlled components. A controlled component means its value is set by state (And not the other way around i.e. State being set by value of component).

Consider the following example:

class SearchBar extends Component {
    constructor(props) {
        super(props);
        this.state = {term : ''};
    }
    render() {
        return (
            <div>
            <input value={this.state.term} onChange = {event => this.setState({term : event.target.value}) }/>
            </div>
        );
    }
}

In above example <SearchBar /> is a Controlled Component.

Following will be sequence of events:

You type 'abc' in input field.
At this time value of input field does not change. Rather the State of component is changing because of our code in onChange Event.
As the state of component changes, the component is rendered again. And now the value of component becomes 'abc'.

This concept becomes more important when we use redux, Actions etc.

edited Oct 06 '16 at 10:35

Raito

1,553
11
27

answered Oct 06 '16 at 03:42

kamal

56
5

but why do you want it to be set by state? how does that good with redux? – stackjlei Oct 06 '16 at 05:16
I am not sure I understood your question. If you mean why state vs prop, this can help: https://github.com/uberVU/react-guide/blob/master/props-vs-state.md. – kamal Oct 07 '16 at 03:16
"why do you want it to be set by state" - i think in this example it only serves to explains concept of controlled component more than anything else. And this is very important concept in React. I think you will appreciate this more as you read more on redux, actions etc. – kamal Oct 07 '16 at 03:36

score 0 · Answer 2 · answered Oct 06 '16 at 02:48

0

Because you will be needing the inputted value from the search bar to the upper component. For instance, if you need to filter a collection based on the given value (through search bar), then the filtering will happen on the upper component, not on the search bar. Search bar is only for the input. We put the value of the search bar from the props to make sure that the values are aligned.

answered Oct 06 '16 at 02:48

Giovanni Lobitos

852
7
19

but the value will already be aligned because the user is typing in the value into the searchBar already, why does it need to go to state and then come back to the searchBar? – stackjlei Oct 06 '16 at 05:18

Shubham Khatri · Answer 3 · 2016-10-06T05:33:07.020

0

The example here depicts the use of controlled input from the parent component. As you see

<input
      type="text"
      placeholder="Search..."
      value={this.props.filterText}
      ref="filterTextInput"
      onChange={this.handleChange}
    />

Here the value of input box is set to {this.props.value} and in the handlechange function you are the onUserInput function which you check is again passed as a prop to the Searchbar. This calls the handleUserInput function ni the FilterableProductTable component and it sets the states filterText, inStockOnly and only these are passed as props to the Searchbar component. So although you can do without it, but controlled input is the way to go in most cases since we are accepting the value provided by the user and updating the value prop of the <input> component. This pattern makes it easy to implement interfaces that respond to or validate user interactions. i.e. if you want to validate an input field or put restrictions on the input value its easier to do with controlled input

edited Oct 06 '16 at 05:33

answered Oct 06 '16 at 03:37

Shubham Khatri

270,417
55
406
400

why is it the way to go? – stackjlei Oct 06 '16 at 05:19
you can validate user interactions through the react component itself through through a handleChange right? why does it have to go all the way through to state and come back to be validated? – stackjlei Oct 11 '16 at 22:15
Of course you can do it. However there is one more advantage to controlled imput. If you are rendering your input value at multiple places in your code or using it at multiple places then its easy. Anyways, its just one way to handle input change, there can be multiple. What u suggest is also correct. – Shubham Khatri Oct 12 '16 at 04:11

What is the purpose of passing props to a React search bar?

3 Answers3