Unkas82 · November 26, 2016 17:19
diff --git a/react search b/react search
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
 </head>
 <body>
    <div id='content'></div>

    <script type="text/babel">

        var CONTACTS = [
            {
                id: 1,
                name: 'Luke Skywalker',
                phoneNumber: '+2128506',
                image: 'https://ssamples.s3.amazonaws.com/uploads/sample/picture/940/5571982eb02a5.jpg'
            } ,     {
                id: 2,
                name: 'Dmitriy Medvedev',
                phoneNumber: '+666666666',
                image: 'https://ssamples.s3.amazonaws.com/uploads/sample/picture/819/54eb462f195bf.jpg'
            } ,    {
                id: 3,
                name: 'Arthut Luffer',
                phoneNumber: '+54545454545',
                image: 'https://ssamples.s3.amazonaws.com/uploads/sample/picture/1020/55f9e7ce8248c.jpg'
            } ,    {
                id: 4,
                name: 'Inu',
                phoneNumber: '+6969696969',
                image: 'https://ssamples.s3.amazonaws.com/uploads/sample/picture/892/55204ebd600d5.jpg'
            } 
        ];


        var Contact = React.createClass({
          render: function() {
            return (<li className="contact">
                      <img className="contact-image" src={this.props.image} />
                      <div className="contact-info"> 
                        <div className="contact-name"> {this.props.name} </div>
                        <div className="contact-number"> {this.props.phoneNumber} </div>
                      </div>
                    </li>
                    );
          }
        });

        var ContactsList = React.createClass({
            getInitialState: function() {
              return {
                displayedContacts: CONTACTS
              };
            },

            handSearch: function(event) {
              var searchQuery = event.target.value.toLowerCase();
              var displayedContacts = CONTACTS.filter(function(el) {
                var searchValue = el.name.toLowerCase();
                return searchValue.indexOf(searchQuery) != -1;
              });
              this.setState({
                displayedContacts: displayedContacts
              });
            },

            render: function() {
                return (
                    <div>
                        <input type="text" className="search-field"  onChange={this.handSearch} />
                        <ul>
                        {
                            this.state.displayedContacts.map(function(el) {
                              return <Contact 
                                key={el.id} 
                                name={el.name} 
                                phoneNumber={el.phoneNumber}
                                image={el.image}
                              />;
                            })
                        }
                        </ul>
                    </div>
                );
            }
        });

        ReactDOM.render(
            <div>
              <ContactsList/>
            </div>,
            document.getElementById('content')
        );
    </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Hello World!</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser.js"></script>
	<link rel="stylesheet" type="text/css" href="style.css">
	</head>
	<body>
	<div id='content'></div>

	<script type="text/babel">

	var CONTACTS = [
	{
	id: 1,
	name: 'Luke Skywalker',
	phoneNumber: '+2128506',
	image: 'https://ssamples.s3.amazonaws.com/uploads/sample/picture/940/5571982eb02a5.jpg'
	} , {
	id: 2,
	name: 'Dmitriy Medvedev',
	phoneNumber: '+666666666',
	image: 'https://ssamples.s3.amazonaws.com/uploads/sample/picture/819/54eb462f195bf.jpg'
	} , {
	id: 3,
	name: 'Arthut Luffer',
	phoneNumber: '+54545454545',
	image: 'https://ssamples.s3.amazonaws.com/uploads/sample/picture/1020/55f9e7ce8248c.jpg'
	} , {
	id: 4,
	name: 'Inu',
	phoneNumber: '+6969696969',
	image: 'https://ssamples.s3.amazonaws.com/uploads/sample/picture/892/55204ebd600d5.jpg'
	}
	];


	var Contact = React.createClass({
	render: function() {
	return (<li className="contact">
	<img className="contact-image" src={this.props.image} />
	<div className="contact-info">
	<div className="contact-name"> {this.props.name} </div>
	<div className="contact-number"> {this.props.phoneNumber} </div>
	</div>
	</li>
	);
	}
	});

	var ContactsList = React.createClass({
	getInitialState: function() {
	return {
	displayedContacts: CONTACTS
	};
	},

	handSearch: function(event) {
	var searchQuery = event.target.value.toLowerCase();
	var displayedContacts = CONTACTS.filter(function(el) {
	var searchValue = el.name.toLowerCase();
	return searchValue.indexOf(searchQuery) != -1;
	});
	this.setState({
	displayedContacts: displayedContacts
	});
	},

	render: function() {
	return (
	<div>
	<input type="text" className="search-field" onChange={this.handSearch} />
	<ul>
	{
	this.state.displayedContacts.map(function(el) {
	return <Contact
	key={el.id}
	name={el.name}
	phoneNumber={el.phoneNumber}
	image={el.image}
	/>;
	})
	}
	</ul>
	</div>
	);
	}
	});

	ReactDOM.render(
	<div>
	<ContactsList/>
	</div>,
	document.getElementById('content')
	);
	</script>
	</body>
	</html>