score:1
there are many ways to accomplish this, but the simplest (in my opinion) is to store your search criteria in the list
component's state and use it to filter which items from your collection get displayed. you can use a backbone collection's built in filter
method to do this.
var list = react.createclass ({
mixins: [backbone.react.component.mixin],
getinitialstate: function () {
return {
namefilter: ''
};
},
updatesearch: function (event) {
this.setstate({
namefilter: event.target.value
});
},
filteritems: function (item) {
// if we have no filter, pass through
if (!this.state.namefilter) return true;
return item.name.tolowercase().indexof(this.state.namefilter) > -1;
},
render: function(){
var list = this.props.collection
.filter(this.filteritems.bind(this))
.map(function(obj){
return (
<div key={obj.id}>
<h2>{obj.name}</h2>
</div>
)
});
return (
<div classname='list'>
{list}
<input onchange={this.updatesearch} type="text" value={this.state.namefilter}/>
</div>
)
}
});
var collection = new backbone.collection([
{
name: 'bob'
},
{
name: 'bill'
},
{
name: 'james'
}
]);
react.render(<list collection={collection}/>, document.body);
jsbin
the search criteria could easily be passed down from a parent component as a prop, so the search input does not have to live inside your list
component.
score:0
eventually i also found a different solution (below), but it involves copying the entire collection into state, which is probably not such a good idea...
var list = react.createclass ({
mixins: [backbone.react.component.mixin],
searchfilter: function () {
var updatedlist = this.state.init;
var searchtext = this.refs.searchbar.getdomnode().value
updatedlist = updatedlist.filter(function (item) {
return item.name.tolowercase().search(
searchtext.tolowercase()) !== -1
});
this.setstate({items: updatedlist})
}
},
getinitialstate: function () {
initialstate = this.getcollection().map(function(model) {
return {
id: model.cid,
name: model.get('name'),
description: model.get('description')
}
});
return {
init: initialstate,
items : []
}
},
componentwillmount: function () {
this.setstate({items: this.state.init})
},
render: function(){
var list = this.state.items.map(function(obj){
return (
<div key={obj.id}>
<h2>{obj.name}</h2>
<p>{obj.description}</p>
</div>
)
});
return (
<div classname='list'>
<input ref='searchbar' type="text" placeholder="search" onchange={this.searchfilter}/>
{list}
</div>
)
}
});
Source: stackoverflow.com
Related Query
- Search in Backbone Collections, Updating UI with React
- Updating an object with setState in React
- Updating state with props on React child component
- Updating source URL on HTML5 video with React
- Updating a React Input text field with the value on onBlur event
- Search Filter with React Native on FlatList
- React hooks useState not updating with onChange
- updating objects with setState in React
- Why is my react component not updating with state updates?
- Updating Parent Component State from Child Component with UseState React Hook
- Search not working with React material-table using remote data
- How can I search for a component with specific key in React Developer Tools?
- react props not updating with redux store
- React router: component not updating on url search param change
- Test input Search box with React testing library
- React Child with useEffect() not updating on Parent State Change
- React not updating state with setState with Array of object
- FlatList not updating with React Hooks and Realm
- Updating C3 charts on props change with React
- Updating list with state React
- React useState hook not updating with axios call
- React hook useState not updating with onSubmit
- Search bar to filter table results in React with timeout
- Updating state on route change with React Redux
- Search results not updating after second search - REACT
- React Component not updating with state change
- React DnD drag item is not updating with useState
- Docker with create react app is not updating changes
- React Hooks & UseEffect not updating display with socketIO data
- Updating a component including a canvas with React
More Query from same tag
- Transforming React State Object into correct JSON schema
- React bootstrap duplicated modal components
- Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead
- How to focus and select a checkbox using React ref?
- React Image Container Div Cutting Off
- Logout error with conditional collection on React Firebase app
- How to change the font color of Material UI table with makeStyles?
- Admin on rest including in another react app "MuiThemeProvider.render()" error
- Right way to use react router v4 in the react application
- React-mde WYSIWYG Editor Absolute Links
- Converting nested array to object, matching array index with object id
- Preventing posts from origin other than domain with axios
- Yup .when validation with typescript
- How to detect if React child element is overflowing
- How do I test component methods on a React component that are defined as arrow functions (class properties)?
- Incorrect values on Highcharts (compared to input)
- How can I test a class which contains imported async methods in it?
- Javascript Can't read second element of array that is array
- Reactjs How to right pass arguments to function in props
- React form using data from previous input
- Using Animated with styled-components (react-native)
- how to make a recursive function asynchronous
- How to show multiple tables list in MySql
- React Js Plotly Remove Time Gaps In Graph
- Setting Active State on mapped component
- Does socket.io allow registering different handlers for one single event?
- React: Persisting state in tabs
- What's the difference between ListView and FlatList?
- is it possible to animate a strikethrough with React Spring?
- How can i set the content of reactstrap modal-header in center?