JSFiddle - React, Tailwind, and code Playground

by Neeraj Yadav

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://npmcdn.com/[email protected]/dist/react-with-addons.js"></script>
<script src="https://npmcdn.com/[email protected]/dist/react-dom.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container">
  <!-- This element's contents will be replaced with your component. -->
</div>

CSS

li {
  list-style: none;
}

JavaScript 1.7

var FilteredList = React.createClass({
  filterList: function(e) {
    var updatedList = this.state.initialItems;

    updatedList = updatedList.filter(function(item) {
      return item.toLowerCase().search(e.target.value.toLowerCase()) !== -1;
    });
    this.setState({
      items: updatedList
    });
  },
  getInitialState: function() {
    return {
      initialItems: ["Apples", "Mango", "Pineapple", "Banana", "Grapes", "Guavas", "Strawberry"],
      items: []
    };
  },
  componentWillMount: function() {
    this.setState({
      items: this.state.initialItems
    });
  },
  render: function() {
    return ( < div className = "filter-list" >
      < input type = "text"
      placeholder = "Search list.."
      onChange = {
        this.filterList
      }
      /> < List items = {
        this.state.items
      }
      /> < /div>
    );
  }
});

var List = React.createClass({
  render: function() {
    return ( < ul > {
      this.props.items.map(function(item) {
        return <li key = {
          item
        } > {
          item
        } < /li>
      })
    } < /ul>);
  }
});

ReactDOM.render( < FilteredList / > , document.getElementById("container"));