Creating a basic search in React

1) Setup the basic structure of your application as mentioned in the earlier tutorial.

2) In your app.js lets first setup a master list against which we will perform the search.

	import React from 'react';
	import ReactDOM from 'react-dom'
	class App extends React.Component {
	constructor(){
	super();
	this.state = {
	colors: ["red", "blue", "green"],
	searchedResult: []
	}
	this.state.searchedResult = this.state.colors
	}
	render(){
	return ();
	}
	}
	export default App

view raw App.js hosted with ❤ by GitHub

We are using constructor for setting up the initial state. In the above example we are setting up two initial states. 'color' state consist of all the initial master data and 'searchedResult' consist of the items which match the search text.

There is a difference in how you initialize states in es6 and es5. Read about more here

For reading more about the es6 syntax in react, go through this link

3) Lets add a textbox, and add an onChange event to it. We are also adding a function to update the list as per search result.

	import React from 'react';
	import ReactDOM from 'react-dom'
	class App extends React.Component {
	constructor(){
	super();
	this.state = {
	colors: ["red", "blue", "green"],
	searchedResult: []
	}
	this.update = this.update.bind(this)
	this.updateList = this.updateList.bind(this)
	this.state.searchedResult = this.state.colors
	}
	update(e){
	var filtered_colors = []
	this.state.colors.map(function(color) {
	if (color.match(e.target.value) !=null )
	{
	filtered_colors.push(color)
	}
	})
	this.setState({searchedResult: filtered_colors})
	}
	render(){
	return (
	<div>
	<ul>{
	this.state.searchedResult.map(function(color) {
	return <li key={color}>{color}</li>
	})}</ul>
	<SearchBox update={this.update}/>
	</div>
	);
	}
	}
	class SearchBox extends React.Component{
	render(){
	return <input type="text" onChange={this.props.update}></input>
	}
	}
	export default App

view raw App2.js hosted with ❤ by GitHub

You will observe we have used bind to attach the update event. This is because when we call a function in without binding  this will not be a class itself, it’s undefined.

Read more about it here -> http://egorsmirnov.me/2015/08/16/react-and-es6-part3.html

4) Lets add one more component so as to update the master list.

	import React from 'react';
	import ReactDOM from 'react-dom'
	class App extends React.Component {
	constructor(){
	super();
	this.state = {
	colors: ["red", "blue", "green"],
	searchedResult: []
	}
	this.update = this.update.bind(this)
	this.updateList = this.updateList.bind(this)
	this.state.searchedResult = this.state.colors
	}
	update(e){
	var filtered_colors = []
	this.state.colors.map(function(color) {
	if (color.match(e.target.value) !=null )
	{
	filtered_colors.push(color)
	}
	})
	this.setState({searchedResult: filtered_colors})
	}
	updateList(e){
	var old_array=this.state.colors
	var new_array=old_array.concat(ReactDOM.findDOMNode(this.refs.but.refs.textAdded).value)
	this.setState({colors: new_array,
	searchedResult: new_array})
	}
	render(){
	return (
	<div>
	<ul>{
	this.state.searchedResult.map(function(color) {
	return <li key={color}>{color}</li>
	})}</ul>
	<SearchBox update={this.update}/>
	<Button ref="but" updateList={this.updateList}/>
	</div>
	);
	}
	}
	class Button extends React.Component{
	render(){
	return(
	<div>
	<input ref="textAdded"></input>
	<button onClick={this.props.updateList}>Add Color</button>
	</div>
	);
	}
	}
	class SearchBox extends React.Component{
	render(){
	return <input type="text" onChange={this.props.update}></input>
	}
	}
	export default App

view raw app3.js hosted with ❤ by GitHub