Reactjs search json

Question

After going through thinking in react 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?

I have a jsfiddle of what I have tried jsfiddle example I just want to display the product name that matches the input value.

heres my code

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

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

    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 (
                    <div>
                    <SearchBox filterText={this.state.filterText} onUserInput={this.handleUserInput}/>
                    <h4>hello</h4>
                    </div>
                )
            } else {
                return (
                    <div>
                        <SearchBox filterText={this.state.filterText} onUserInput={this.handleUserInput}/>
                        {this.props.products[0].name}
                    </div>
                );
            }
        }
    })

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

    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(
      <SearchPage />,
      document.getElementById('container')
    );

Answer 1

You can use .find() in order to achieve that.

let selectedProduct = this.props.products
                        .find(product => product.name === this.state.filterText);

Your FilterableProfileTable render() method should look like this

render: function () {
    let selectedProduct = this.props.products.find(product => product.name === this.state.filterText);
    return this.state.show 
             ? (
                <div>
                    <SearchBox filterText={this.state.filterText} onUserInput={this.handleUserInput}/>
                    <h4>hello</h4>
                </div>
                )
            : (
                <div>
                  <SearchBox filterText={this.state.filterText} onUserInput={this.handleUserInput}/>
                  <div>{selectedProduct && selectedProduct.name}</div>
                  <div>{selectedProduct && selectedProduct.stock}</div>
                  <div>{selectedProduct && selectedProduct.price}</div>
                  <div>{selectedProduct && selectedProduct.category}</div>
                </div>
              )
}

jsfiddle