Reactjs search json
<p>After going through <a href="https://facebook.github.io/react/docs/thinking-in-react.html" rel="nofollow">thinking in react</a> blog I am trying to implement something similar. but instead of filtering the array table I would rather it displays the the row that contains the input value?</p>

<p>I have a jsfiddle of what I have tried <a href="https://jsfiddle.net/mrabalogu/pthmjx9y/" rel="nofollow">jsfiddle example</a> I just want to display the product name that matches the input value.</p>

<p>heres my code</p>

<pre><code>var SearchBox = React.createClass({
        handleChange: function() {
            this.props.onUserInput(this.refs.filterTextInput.value);
        },

        render: function () {
            return (
                &lt;div&gt;
                    &lt;input 
                      type="text" 
                      className="form-control" 
                      placeholder="Type in someone" 
                      value={this.props.filterText}
                      ref="filterTextInput"
                      onChange={this.handleChange}/&gt;
                &lt;/div&gt;
            );
        }
    });

    var FilterableProfileTable = React.createClass({
        getInitialState: function() {
            return {
              filterText: '',
              show: true
            };
        },

        handleUserInput: function(filterText) {
            this.setState({
              filterText: filterText,
              show: false
            });
        },
        render: function () {
            if (this.state.show){
                return (
                    &lt;div&gt;
                    &lt;SearchBox filterText={this.state.filterText} onUserInput={this.handleUserInput}/&gt;
                    &lt;h4&gt;hello&lt;/h4&gt;
                    &lt;/div&gt;
                )
            } else {
                return (
                    &lt;div&gt;
                        &lt;SearchBox filterText={this.state.filterText} onUserInput={this.handleUserInput}/&gt;
                        {this.props.products[0].name}
                    &lt;/div&gt;
                );
            }
        }
    })

    var SearchPage = React.createClass({
        render: function () {
            return (
                &lt;div className="searchpage-container"&gt;
                    &lt;div className="search-header"&gt;
                    &lt;/div&gt;
                    &lt;div className="col-md-12 searchpage-searchbar-container"&gt;
                        &lt;div className="col-md-5"&gt;
                            &lt;FilterableProfileTable products={PRODUCTS}/&gt;
                        &lt;/div&gt;
                        &lt;div className="col-md-2 middle-logo"&gt;
                        &lt;/div&gt;
                        &lt;div className="col-md-5"&gt;
                            &lt;FilterableProfileTable products={PRODUCTS}/&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div className="searchpage-homepage-combo"&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            );
        }
    });

    var PRODUCTS = [
      {category: 'Sporting Goods', price: '$49.99', stocked: true, name: 'Football'},
      {category: 'Sporting Goods', price: '$9.99', stocked: true, name: 'Baseball'},
      {category: 'Sporting Goods', price: '$29.99', stocked: false, name: 'Basketball'},
      {category: 'Electronics', price: '$99.99', stocked: true, name: 'iPod Touch'},
      {category: 'Electronics', price: '$399.99', stocked: false, name: 'iPhone 5'},
      {category: 'Electronics', price: '$199.99', stocked: true, name: 'Nexus 7'}
    ];

    ReactDOM.render(
      &lt;SearchPage /&gt;,
      document.getElementById('container')
    );
</code></pre>