CODEWITHSUNDEEP
javascriptreactjsinputindirection
stackjlei
stackjlei

Reputation: 10035

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

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>
    );
  }
});

Upvotes: 3

Views: 1025

Answers (3)

kamal
kamal

Reputation: 56

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:

  1. You type 'abc' in input field.
  2. At this time value of input field does not change. Rather the State of component is changing because of our code in onChange Event.
  3. 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.

Upvotes: 1

Shubham Khatri
Shubham Khatri

Reputation: 281990

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

Upvotes: 0

Giovanni Lobitos
Giovanni Lobitos

Reputation: 852

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.

Upvotes: 0

Related Questions