Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.min.js"></script>
   <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript"></script>

    var ZOO;
    $(function(){

        $.ajax({
            url:'test_ajax.php',
            type:'GET',
            success: function(data){
                ZOO = parse(data);
            }
        })
    });
    var Animals = React.createClass({
            render: function() {
                return (
                    <li className ="animal">
                            <div>
                                <div> {this.props.types} </div>
                                <div> {this.props.name} </div>
                            </div>
                    </li>
                )
            };
        });
        var AnimalsList = React.createClass({
            getInitialState: function() {
                return {
                    displayedAnimals: ZOO
                };
            },
            handleSearch: function(event) {
                var searchQuery = event.target.value.toLowerCase();
                var displayedAnimals = ZOO.filter(function(el) {
                    var searchValue = el.name.toLowerCase();
                    var searchQuery1 = el.types.toLowerCase();
                    return searchValue.indexOf(searchQuery) !== -1 || searchQuery1.indexOf(searchQuery) !== -1;
                });
                this.setState({
                    displayedAnimals: displayedAnimals
                });
            },
            render: function() {
                return (
                    <div className="ZOO">
                        <input type="text" placeholder="Name Search" className="search-field" onChange={this.handleSearch} />
                        <ul className="animal-list">
                            {
                               this.state.displayedContacts.map(function(el) {
                                    return <Animal
                                        key={el.id}
                                        types={el.types}
                                        name={el.name}
                                    />;
                               })
                            }
                        </ul>
                    </div>
                );
            }
        });
        ReactDOM.render(
            <AnimalsList />,
            document.getElementById("content")
        );

    </script>
    <!--<form action=""><input type="search" id="search-text"> <input type="submit"></form> -->
</body>

</html>