score:1
Accepted answer
step 1: store json data in state as it was received in api response:
peoplelistfromapi = () => {
const baseurl = 'https://swapi.dev/api/'
axios.get(baseurl + 'people').then((response) => {
const peoplelist = response.data.results || []
this.setstate({ peoplelist: peoplelist })
})
}
onchange = (event) => {
this.setstate({ search: event.target.value })
}
filterfunction = (people) => {
return people.name.touppercase().indexof(this.state.search.touppercase()) > -1
}
step 2: filter and show it in the ui:
render() {
return (
<main>
<ul>
{this.state.peoplelist.filter(this.filterfunction).map((filtered, i) => (
<li key={i}>
{/* you can use: key={filtered.id} if it exists */}
{'(' +
filtered.gender +
') ' +
filtered.name +
' is ' +
filtered.height +
' cm tall, got ' +
filtered.eye_color +
' eyes and is born ' +
filtered.birth_year}
</li>
))}
</ul>
<input
classname="search"
placeholder="search the universe..."
type="text"
value={this.state.search}
onchange={this.onchange}
></input>
</main>
)
}
score:1
let users = [
{
name: 'riyas',
age: 31
},
{
name: 'testuser',
age: 22
},
{
name: 'testuser123',
age: 22
}
];
class test extends react.component {
constructor(props) {
super(props);
this.state = {
users: users,
result: users,
};
this.filterlist = this.filterlist.bind(this);
}
componentwillreceiveprops(nextprops) {
this.setstate({
users: nextprops.users,
});
}
filterlist(event) {
let value = event.target.value;
let users = this.state.users, result=[];
result = users.filter((user)=>{
return user.name.tolowercase().search(value) != -1;
});
this.setstate({result});
}
render(){
const userlist = this.state.result.map((user) => {
return <li>{user.name} {user.age}</li>;
});
return(<div>
<input type="text" placeholder="search" onchange={this.filterlist}/>
<ul>
{userlist}
</ul>
</div>
);
}
}
reactdom.render(<test/>, document.getelementbyid('app'))
this is an example for filtering the data using a text box
score:4
here is the code snippet, that you can use to filter data :
const filternames = ({ name }) => {
return name.tolowercase().indexof(searchvalue.tolowercase()) !== -1;
};
return (
<div classname="app">
<h2>search</h2>
<searchbar onsearch={setsearchvalue} value={searchvalue} />
<ul>
{users.filter(filternames).map((user) => {
return <li key={user.id}>
{user.name}
</li>
})}
</ul>
</div>
);
Source: stackoverflow.com
Related Query
- Search Filter with React Native on FlatList
- how to create React search filter for search multiple object key values
- How to fix a React search filter that doesn't update on backspace
- Search filter does not work across the react-table on setState : React JS
- Search bar to filter table results in React with timeout
- React Search filter function
- React search and filter methods issue
- How to implement Regex filter in a React search bar?
- React Filter not returning data if search is empty
- Make a search filter with react and typescript
- How to create dynamic search filter in react JS?
- react search filter with select option
- How to do filter search in react js / JS?
- search filter by name in react using input
- How to add custom icon in react select of search filter
- How make work a search filter in react for node array
- Search Query to Filter Results in React
- React Search or Filter data based on multiple input
- React search filter using select option and useRef
- Adding search filter to an accordion having tables using React
- React table search filter work on console window but in react table it not showing filter data
- react material-table's search filter does not work on render
- filter list based on input field in react using search regular expression
- how to apply the some array method to a filter search in react
- React - Make search and filter work on a given data at same time irrespective of the order of change
- filter data as search based on name from maps in react js
- How to filter a search result in React with filter button?
- Multiple listboxes with multiple values search array filter in React
- Search Filter from json file data in React
- React Search filter (hooks) through a High Order Component not working
More Query from same tag
- Why is Redux passing dispatch into the return function of an action?
- Make material-ui grids wrap, on larger screens
- redux dumb component function unit-test
- How can I render the contents of an array of arrays in React?
- Can't concatenate json server data into array using useEffect hook in React
- Argument of type 'Date | null' is not assignable to parameter of type 'string'
- I want to use my form inputs to set origin and destination
- input values are inline, not separated by line breaks
- how can i change the color/size of google map markers in tomchent google-react-maps?
- Why is a function I expect to be shaken from a tree still there on a create-react-app build?
- Selecting a json key-value pair dynamically in React
- React Formik - app performs unwanted request (submit) after pressing Enter key in the input field
- React Render Components with Array.map auto scrolls down
- Toggle body class with styled-components and React setState
- Trying to show only one form
- React & TypeScript - what's the difference between `React.Component` and `typeof React.Component`
- Mapping from passed props in a functional component
- Does javascript keep a reference to a variable found in a array?
- Dynamically adding items to an array
- How can I fetch JSON files from a folder, in a React + React-Router app?
- React props and Component
- If print the console log, it is normal. but execution is empty
- How to design collapsible list with in reactjs component with plus minus toggle along with the title text
- Declare optional Event callback in Typescript React
- Using react-intl with react-bootstrap
- How to target specific components through Links in react-router?
- getDoc values Firebase React
- ReatctJS ComponentDidUpdate not firing?
- Heroku H10 works on localhost, won't work in deployment
- How do I update state of a functional component from a class component in order to display items from a map in react