Commit cac5fcf

committed

add search filter

1 parent f51f975 commit cac5fcfCopy full SHA for cac5fcf

File tree

+52

-0

lines changed

+52

-0

lines changed

Lines changed: 1 addition & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -23,6 +23,7 @@`
`23`	`23`	`- [React Web Camera Streaming](react-js/webcam.js)`
`24`	`24`	`- [Exportable Date Time](react-js/dateTime.js)`
`25`	`25`	`- [Pagination and Usage](react-js/Pagination.js)`
	`26`	`+- [Search Component](react-js/Search.js)`
`26`	`27`	`- [Navbar Component with State Handle](react-js/Navbar.js)`
`27`	`28`	`- [SideNavigation Component with State Handle](react-js/SideNavigation)`
`28`	`29`	`- [Team Component](react-js/team/Team.js)`

Lines changed: 51 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,51 @@`
	`1`	`+import React, { Component } from 'react';`
	`2`	`+`
	`3`	`+export default class Search extends Component {`
	`4`	`+`
	`5`	`+ state = {`
	`6`	`+ data: [`
	`7`	`+ "Go to the store",`
	`8`	`+ "Wash the dishes",`
	`9`	`+ "Learn some code"`
	`10`	`+ ],`
	`11`	`+ filter: ""`
	`12`	`+`
	`13`	`+ };`
	`14`	`+`
	`15`	`+ // componentDidMount() {`
	`16`	`+`
	`17`	`+ // axios.get(url)`
	`18`	`+ // .then(response => this.setState({ data: response.data.recipes }))`
	`19`	`+ // }`
	`20`	`+`
	`21`	`+ handleChange = (event) =>{`
	`22`	`+ this.setState({ filter: event.target.value });`
	`23`	`+`
	`24`	`+ }`
	`25`	`+`
	`26`	`+ render() {`
	`27`	`+ const { filter, data } = this.state;`
	`28`	`+ const lowercasedFilter = filter.toLowerCase();`
	`29`	`+ const filteredData = data.filter(item => {`
	`30`	`+ return Object.keys(item).some(key =>`
	`31`	`+ item[key].toLowerCase().includes(lowercasedFilter)`
	`32`	`+ );`
	`33`	`+ })`
	`34`	`+`
	`35`	`+ return (`
	`36`	`+ <div className="container">`
	`37`	`+ <input type="text" className="input" onChange={this.handleChange} placeholder="Search..." />`
	`38`	`+`
	`39`	`+ <div className="row">`
	`40`	`+ <div className="col-lg-8 offset-lg-2">`
	`41`	`+ <h2>Todo List</h2>`
	`42`	`+ {filteredData && filteredData.map((d, index) => (`
	`43`	`+ <li> {d} </li>`
	`44`	`+ ))}`
	`45`	`+ </div>`
	`46`	`+ </div>`
	`47`	`+ </div>`
	`48`	`+ );`
	`49`	`+ }`
	`50`	`+}`
	`51`	`+`

Comments

(0)