A filter on reactjs should fetch from a json file. For example,

{sex: "male", name: "John"},{sex: "female", name: "Kate"}

Visually, 3 checkbox: All, Male, Female. According to checked information is displayed.

Does anyone have a link to such examples? Not necessarily a complete solution.

Closed due to the fact that off-topic participants Kromster , αλεχολυτ , Sasha Omelchenko , Mikhail Vaysman , Dmitriy Simushev 21 Apr '17 at 19:09 .

It seems that this question does not correspond to the subject of the site. Those who voted to close it indicated the following reason:

  • "The message contains only the text of the task, in which there is no description of the problem, or the question is purely formal (" how do I do this task ") . To reopen the question, add a description of the specific problem, explain what does not work, what you see the problem. " - Kromster, αλεχολυτ, Sasha Omelchenko, Mikhail Vaysman, Dmitriy Simushev
If the question can be reformulated according to the rules set out in the certificate , edit it .

  • one
    What does this question have to do with the reactor? How will creating a filter for a reactor be different from a filter for angular or js? And this is not a question, tz for freelancing. - user220409

1 answer 1

It is unlikely that there is such an example, it is easier to write it yourself. A component might look like this:

 import React, {Component} from 'react'; export default class Filter extends Component { constructor(props, context) { super(props, context); this.state = { types: { male: false, female: false } } } onCheckboxChange(type) { this.setState({ types: { ...this.state.types, [type]: !this.state.types[type] } }); } render() { return ( <div> <ul> <li> <input id="chk-male" type="checkbox" value={this.state.types.male} onChange={this.onCheckboxChange.bind(this, "male")} /><label htmlFor="chk-male">Male</label> </li> <li> <input id="chk-female" type="checkbox" value={this.state.types.female} onChange={this.onCheckboxChange.bind(this, "female")} /><label htmlFor="chk-female">Female</label> </li> </ul> <div> {this.props.json.filter(item => this.state.types[item.sex]).map(item => ( <div>{item.name}</div> ))} </div> </div> ); } }

And call it like this:

 <Filter json={[{sex: "male", name: "John"},{sex: "female", name: "Kate"}]} />
  • well done! did work for someone for free. - user220409
  • Here work for 5-10 minutes, it is quite suitable as a manual. - Roman Maksimov
  • it's not about time but about creating an aura of a resource. If you do homework for the participants, to answer questions that are answered in books for beginners, the resource will turn into email answers. If you want to communicate with professionals on professional topics, then I don’t need in my opinion to encourage such questions, and even dubious content. Do not you see that the question was asked by a professional zadalschikom the level of which would not allow to ask such nonsense. - user220409
  • but I said a little bit of excess and it seems that I am calling for something. No, I just want the right resource with the right questions that help grow, not a kindergarten that takes time. - user220409
  • thanks Roman, just like the manual and fit. Redid the code under your condition. - Dmitry N