Building a simple component in React.js - Part 3 - Displaying Results
September 30, 2015
react
In the last post we carried on building some React.js components for searching for a company name and displaying matching names. In this post, we are going to finish this off by displaying the results.
The first thing we need to do is to complete the implementation of the handleSearch function in the Search component.
- Line 2 initialises some state that we use for the matching customers
- Line 46 calls a new getCustomers function, which loops through the customers array, checking for matches, builds up an array of matching customers, before returning the built up array
- Line 47 sets some state to the matching customers
- Line 53 passes that state into the Results component. When state changes, the Results component will automatically be re-rendered
var Search = React.createClass({
getInitialState: function() {
return { data: [] };
},
customers: [
{
name: "Alfreds Futterkiste"
},
{
name: "Berglunds snabbköp"
},
{
name: "Cactus Comidas para llevar"
},
{
name: "Chop-suey Chinese"
},
{
name: "Du monde entier"
},
{
name: "Ernst Handel"
},
{
name: "France restauration"
},
{
name: "Island Trading"
},
{
name: "Let's Stop N Shop"
},
{
name: "Maison Dewey"
},
{
name: "Paris spécialités"
},
{
name: "Que Delícia"
},
{
name: "Rancho grande"
}
],
getCustomers: function(criteria) {
var i,
ret = [];
for (i = 0; i < this.customers.length; i = i + 1) {
if (this.customers[i].name.toLowerCase().indexOf(criteria) === 0) {
ret.push(this.customers[i]);
}
}
return ret;
},
handleSearch: function(criteria) {
var i, ret;
ret = this.getCustomers(criteria);
this.setState({ data: ret });
},
render: function() {
return (
<div>
<Criteria onSearch={this.handleSearch} />
<Results data={this.state.data} />
</div>
);
}
});Lastly, we need to change the Results component.
- Line 3 interates over the data property we passed into the component (our matching customers) and builds up a list of customer names
- Line 13 returns the list markup
- Notice on line 13 you need to pass in the inline style attribute as an object or React.js complains
var Results = React.createClass({
render: function() {
var listItems = this.props.data.map(function(customer) {
return <li>{customer.name}</li>;
});
var listStyle = {
listStyleType: "none",
padding: "0"
};
return <ul style={listStyle}>{listItems}</ul>;
}
});That completes our components. The full markup can be found here
Recommended reading for building great React apps:
If you to learn about using TypeScript with React, you may find my course useful:
Using TypeScript with React
You might find some of my other posts interesting: