Looks like the code snippet you have posted might not be complete. I see some unbalanced parentheses for `applyFilter` Function in your Provider component.
static applyFilter(cards, filter) {
const { query } = filter;
let result = cards;
if (query) {
const search = query.toLowerCase();
result = result.filter(item => item.title.indexOf(search) !== -1);
}
state = DefaultState;
Also I'm wondering why would you need a `setTimeout` to call `setState` function in `Filter` component. The below
onChange={() =>
setTimeout(() => this.props.updateFilter(this.state), 0)
}
You can get rid of that as well.
I have made some edits to complete `applyFilter` function to return the filtered data. Please have a look at the below code and `Run Code Snippet` to see the code in action. Hope this helps!
<!-- begin snippet: js hide: false console: true babel: true -->
<!-- language: lang-js -->
// Provider Class
const DefaultState = {
cardListings: [],
filter: {}
};
const CardListingsContext = React.createContext(DefaultState);
const CardListingsConsumer = CardListingsContext.Consumer;
class CardListingsProvider extends React.Component {
static applyFilter(cards, filter) {
const {
query
} = filter;
let result = cards;
if (query) {
const search = query.toLowerCase();
result = result.filter(item => item.title.indexOf(search) !== -1);
}
return result;
}
state = DefaultState;
componentDidMount() {
Promise.resolve([{
id: 1,
title: "animation"
},
{
id: 2,
title: "balloon"
},
{
id: 3,
title: "cartoon"
}
]).then(res => {
this.setState({
cardListings: res
});
});
}
updateFilter = filter => {
this.setState({
filter
});
};
render() {
const {
children
} = this.props;
const {
cardListings,
filter
} = this.state;
const filteredListings = CardListingsProvider.applyFilter(
cardListings,
filter
);
return ( <
CardListingsContext.Provider value = {
{
allListings: cardListings,
cardListings: filteredListings,
updateFilter: this.updateFilter
}
} >
{
children
}
</CardListingsContext.Provider>
);
}
}
class Filter extends React.Component {
state = { query: "" };
render() {
return (
<form
noValidate
onChange={() =>
setTimeout(() => this.props.updateFilter(this.state), 0)
}
>
<p className="mb-1">Refine your results</p>
<div className="form-group">
<input
type="text"
className="form-control form-control-lg"
placeholder="Search for a card..."
name="query"
value={this.state.query}
onChange={event => this.setState({ query: event.target.value })}
/>
</div>
</form>
);
}
}
class Home extends React.Component {
render() {
return (
<div>
<CardListingsProvider>
<CardListingsConsumer>
{function(value) {
const { cardListings, updateFilter } = value;
return (
<React.Fragment>
<Filter updateFilter={updateFilter} />
<div className="columns">
{cardListings.map(item => (
<div key={item.itemId}>{JSON.stringify(item)}</div>
))}
</div>
</React.Fragment>
);
}}
</CardListingsConsumer>
</CardListingsProvider>
</div>
);
}
}
ReactDOM.render( <Home /> , document.getElementById("root"))
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
<!-- end snippet -->
That's *property spread notation*. It was added in ES2018, but long-supported in React projects via transpilation (as "JSX spread attributes" even though you could do it elsewhere, too, not just attributes).
`{...this.props}` *spreads out* the "own" properties in `props` as discrete properties on the `Modal` element you're creating. For instance, if `this.props` contained `a: 1` and `b: 2`, then
<Modal {...this.props} title='Modal heading' animation={false}>
would be the same as
<Modal a={this.props.a} b={this.props.b} title='Modal heading' animation={false}>
But it's dynamic, so whatever "own" properties are in `props` are included.
Since `children` is an "own" property in `props`, spread will include it. So if the component where this appears had child elements, they'll be passed on to `Modal`. Putting child elements between the opening tag and closing tags is just syntactic sugar — the good kind — for putting a `children` property in the opening tag. Example:
<!-- begin snippet: js hide: true console: true babel: true -->
<!-- language: lang-js -->
class Example extends React.Component {
render() {
const { className, children } = this.props;
return (
<div className={className}>
{children}
</div>
);
}
}
ReactDOM.render(
[
<Example className="first">
<span>Child in first</span>
</Example>,
<Example className="second" children={<span>Child in second</span>} />
],
document.getElementById("root")
);
<!-- language: lang-css -->
.first {
color: green;
}
.second {
color: blue;
}
<!-- language: lang-html -->
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<!-- end snippet -->
Spread notation is handy not only for that use case, but for creating a new object with most (or all) of the properties of an existing object — which comes up a lot when you're updating state, since you can't modify state directly:
this.setState(prevState => {
return {foo: {...prevState.foo, a: "updated"}};
});
That replaces `this.state.foo` with a new object with all the same properties as `foo` except the `a` property, which becomes `"updated"`:
<!-- begin snippet: js hide: true console: true babel: false -->
<!-- language: lang-js -->
const obj = {
foo: {
a: 1,
b: 2,
c: 3
}
};
console.log("original", obj.foo);
// Creates a NEW object and assigns it to `obj.foo`
obj.foo = {...obj.foo, a: "updated"};
console.log("updated", obj.foo);
<!-- language: lang-css -->
.as-console-wrapper {
max-height: 100% !important;
}
<!-- end snippet -->
[1]: https://reactjs.org/docs/jsx-in-depth.html#children-in-jsx
