React

by Vikram Deshmukh

HTML

<div id="app"></div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

.done {
  color: rgba(0, 0, 0, 0.3);
  text-decoration: line-through;
}

input {
  margin-right: 5px;
}

React

class MyApp extends React.Component {

          constructor(props) {
            super(props);

            this.state = { 
              MyList:[ 
                'A',
                'B',
                'C'
              ],
            filter: "",
            selectedItem: ""
          }
          this.handleClick = this.handleClick.bind(this);
        }

        handleFilter = (newFilter) => {
            this.setState(() => ({
              filter: newFilter
            }));
        }

        handleClick(selectedItem) {
            this.setState((prevstate) => ({
              MyList: selectedItem
            }));  
        }

        render() {

            const filteredList = this.state.MyList.filter(section => 
              section.toLowerCase().includes(this.state.filter.toLowerCase()))

            return (
                <div>
                  {<Filter handleFilter={this.handleFilter} />}
                  {filteredList.map((listItem, i) => 
                  <p onClick={() => this.handleClick(i)}>{listItem}</p>)}
                </div>
             )
           }
        }


        const Filter = (props) => (
            <div>
              <input name="filter" onChange={(e) => {
                  props.handleFilter(e.target.value);
                }}/>
            </div>
          );


        ReactDOM.render(<MyApp/>, document.getElementById('root'));