EnriqueV/search.html

## search.html
<!DOCTYPE HTML>
  <html>
    <head>
      <meta charset="utf-8">
      <title>Search con React</title>
    <script src="build/react.js"></script>
    <script src="build/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
    </head>
    <body>
      <div id="search"></div>
     <script type="text/babel">

var Buscador = React.createClass({

    getInitialState: function(){
        return { palabra: '' };
    },

    handleChange: function(e){


        this.setState({palabra:e.target.value});
    },

    render: function() {

        var autos = this.props.items,
            palabra = this.state.palabra.trim().toLowerCase();


        if(palabra.length > 0){


            autos = autos.filter(function(l){
                return l.name.toLowerCase().match( palabra );
            });

        }

        return <div>
    <input type="text" value={this.state.palabra} onChange={this.handleChange} placeholder="Escribe el nombre de un auto" />

                    <ul>

                        { autos.map(function(l){
                            return <li>{l.name} <a href={l.url}>{l.url}</a></li>
                        }) }

                    </ul>

                </div>;

    }
});


var autos = [

    { name: 'Mustang Shelby Clasic', url: 'http://goo.gl/Re8iab'},
    { name: 'Jeep Patriot', url: 'http://www.moibbk.com/images/jeep-patriot-4.jp'},
    { name: 'Hummer', url: 'http://ep.yimg.com/ay/yhst-66365157547983/hummer-h2-sut-lift-kits-7.jpg'},
    { name: 'Honda Civic', url: 'http://goo.gl/G2koV6'},
    { name: 'Subaru', url: 'http://zombdrive.com/images/subaru-1.jpg'},
    { name: 'Cayman', url: 'http://goo.gl/Xv1vE8'},
    { name: 'Ferrary', url: 'http://goo.gl/bJCREh'},

];


ReactDOM.render(
    <Buscador items={ autos } />,
    document.getElementById('search')
);
     </script>


    </body>
  </html>
	<!DOCTYPE HTML>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Search con React</title>
	<script src="build/react.js"></script>
	<script src="build/react-dom.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
	</head>
	<body>
	<div id="search"></div>
	<script type="text/babel">

	var Buscador = React.createClass({

	getInitialState: function(){
	return { palabra: '' };
	},

	handleChange: function(e){



	this.setState({palabra:e.target.value});
	},

	render: function() {

	var autos = this.props.items,
	palabra = this.state.palabra.trim().toLowerCase();


	if(palabra.length > 0){



	autos = autos.filter(function(l){
	return l.name.toLowerCase().match( palabra );
	});

	}

	return <div>
	<input type="text" value={this.state.palabra} onChange={this.handleChange} placeholder="Escribe el nombre de un auto" />

	<ul>

	{ autos.map(function(l){
	return <li>{l.name} <a href={l.url}>{l.url}</a></li>
	}) }

	</ul>

	</div>;

	}
	});


	var autos = [

	{ name: 'Mustang Shelby Clasic', url: 'http://goo.gl/Re8iab'},
	{ name: 'Jeep Patriot', url: 'http://www.moibbk.com/images/jeep-patriot-4.jp'},
	{ name: 'Hummer', url: 'http://ep.yimg.com/ay/yhst-66365157547983/hummer-h2-sut-lift-kits-7.jpg'},
	{ name: 'Honda Civic', url: 'http://goo.gl/G2koV6'},
	{ name: 'Subaru', url: 'http://zombdrive.com/images/subaru-1.jpg'},
	{ name: 'Cayman', url: 'http://goo.gl/Xv1vE8'},
	{ name: 'Ferrary', url: 'http://goo.gl/bJCREh'},

	];



	ReactDOM.render(
	<Buscador items={ autos } />,
	document.getElementById('search')
	);
	</script>


	</body>
	</html>