Priince Abalogu Priince Abalogu - 1 month ago 13
React JSX Question

Reactjs search json

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

QoP QoP
Answer

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

Comments