osmelmora · May 25, 2016 20:38
diff --git a/contact-list-search.html b/contact-list-search.html
 <!DOCTYPE html>
 <html>
    <head>
        <meta charset="UTF-8" />
        <title>Hello React</title>
        <script src="https://fb.me/react-15.0.2.js"></script>
        <script src="https://fb.me/react-dom-15.0.2.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
    </head>
    <body>
        <div id="example"></div>
        <script type="text/babel">
            var list = [
                {id: 1463777842462, name: 'Jordan Walke', email: '[email protected]'},
                {id: 1463777853704, name: 'Dan Abramov', email: '[email protected]'},
                {id: 1463777863341, name: 'Sebastian Markbage', email: '[email protected]'},
                {id: 1463777872559, name: 'Pete Hunt', email: '[email protected]'}
            ];

            var Search = React.createClass({
                render: function() {
                    return (
                        <input
                            type='text'
                            placeholder='search'
                            value={this.props.text}
                            onChange={this.handleTextChange} />
                    );
                },
                
                handleTextChange: function(event) {
                    this.props.onTextChange(event.target.value);
                },
                
                propTypes: {
                    text: React.PropTypes.string
                }
            });

            var ContactItem = React.createClass({
                render: function() {
                    return (
                        <li className='contact-item'>
                            <span> Name: {this.props.name} </span>
                            <span> Email: {this.props.email} </span>
                        </li>
                    );
                },
            
                propTypes: {
                    name: React.PropTypes.string.isRequired,
                    email: React.PropTypes.string.isRequired
                }
            });

            var ContactList = React.createClass({
                render: function() {
                    var contacts = this.props.items.map(function(item) {
                        return (
                            <ContactItem key={item.id}  name={item.name}  email={item.email} />
                        );
                    });
            
                    return (
                        <ul className='contact-list'>{contacts}</ul>
                    );
                },
            
                propTypes: {
                    items: React.PropTypes.array.isRequired
                }
            });

            var App = React.createClass({
                getInitialState() {
                    return {
                        text: '',
                        items: this.props.initialItems
                    };
                },
            
                render: function() {
                    var text = this.state.text;
                    var filterdContacts = this.state.items.filter(function(contact) {
                        return contact.name.indexOf(text) !== -1 ||
                            contact.email.indexOf(text) !== -1;
                    });
            
                    return (
                        <div className='container'>
                            <Search text={this.state.text} onTextChange={this.changeText} />
                            <ContactList items={filterdContacts} />     
                        </div>
                    );
                },
            
                changeText(newText) {
                    this.setState({text: newText});
                },
                
                propTypes: {
                    initialItems: React.PropTypes.array
                }
            });
            
            ReactDOM.render(
                <App initialItems={list} />,
                document.getElementById('app-container')
            );

        </script>
    </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8" />
	<title>Hello React</title>
	<script src="https://fb.me/react-15.0.2.js"></script>
	<script src="https://fb.me/react-dom-15.0.2.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
	</head>
	<body>
	<div id="example"></div>
	<script type="text/babel">
	var list = [
	{id: 1463777842462, name: 'Jordan Walke', email: '[email protected]'},
	{id: 1463777853704, name: 'Dan Abramov', email: '[email protected]'},
	{id: 1463777863341, name: 'Sebastian Markbage', email: '[email protected]'},
	{id: 1463777872559, name: 'Pete Hunt', email: '[email protected]'}
	];

	var Search = React.createClass({
	render: function() {
	return (
	<input
	type='text'
	placeholder='search'
	value={this.props.text}
	onChange={this.handleTextChange} />
	);
	},

	handleTextChange: function(event) {
	this.props.onTextChange(event.target.value);
	},

	propTypes: {
	text: React.PropTypes.string
	}
	});

	var ContactItem = React.createClass({
	render: function() {
	return (
	<li className='contact-item'>
	<span> Name: {this.props.name} </span>
	<span> Email: {this.props.email} </span>
	</li>
	);
	},

	propTypes: {
	name: React.PropTypes.string.isRequired,
	email: React.PropTypes.string.isRequired
	}
	});

	var ContactList = React.createClass({
	render: function() {
	var contacts = this.props.items.map(function(item) {
	return (
	<ContactItem key={item.id} name={item.name} email={item.email} />
	);
	});

	return (
	<ul className='contact-list'>{contacts}</ul>
	);
	},

	propTypes: {
	items: React.PropTypes.array.isRequired
	}
	});

	var App = React.createClass({
	getInitialState() {
	return {
	text: '',
	items: this.props.initialItems
	};
	},

	render: function() {
	var text = this.state.text;
	var filterdContacts = this.state.items.filter(function(contact) {
	return contact.name.indexOf(text) !== -1 \|\|
	contact.email.indexOf(text) !== -1;
	});

	return (
	<div className='container'>
	<Search text={this.state.text} onTextChange={this.changeText} />
	<ContactList items={filterdContacts} />
	</div>
	);
	},

	changeText(newText) {
	this.setState({text: newText});
	},

	propTypes: {
	initialItems: React.PropTypes.array
	}
	});

	ReactDOM.render(
	<App initialItems={list} />,
	document.getElementById('app-container')
	);

	</script>
	</body>
	</html>