How to filter items of an array displayed on the screen in React?

Question

I am learning about React basics and came across this challenge that gave me a lot of trouble.

I have list of items in 'state' function. When I am listing them on the screen, I would like to list the ones that have 'found=0' value. I have tried to search in the web, tried applying so many different solutions including the ones from here in stackoverflow but I kept getting so many different errors so I couldn't make it work.

This is my 'state' function saved in my App.js file:

  state = {
counters: [
  { id: 1, title: "Soymilk", found: 1, value: 0 },
  { id: 2, title: "Mushroom", found: 0, value: 0 },
  { id: 3, title: "Tomatoes", found: 1, value: 0 },
  { id: 4, title: "Potatoes", found: 0, value: 0 },
  { id: 5, title: "Meat", found: 0, value: 0 },
  { id: 6, title: "Beans", found: 0, value: 0 },
  { id: 7, title: "Bread", found: 0, value: 0 }
]};

And this is the counter.jsx code that displays my items:

  render() {
return (
  <div className="list-group">
    <span className="font-weight-bold list-group-item list-group-item-action flex-column align-items-start">
      {this.props.counter.title}
      <span className="font-weight-normal text-secondary float-right">
        {this.foundMessage()}
      </span>
    </span>
    <div className="row">
      <button
        onClick={() => this.props.onFind(this.props.counter)}
        className="btn btn-sm col-3 btn-primary col-6"
      >
        Found it!
      </button>
      <button
        onClick={() => this.props.onDelete(this.props.counter.id)}
        className="btn btn-danger btn-sm col-6"
      >
        No more needed!
      </button>
    </div>
  </div>
);}}

Jaydeep Galani · Accepted Answer · 2019-04-18 06:21:53Z

2

You can filter your data,

like this,

let filteredData= this.state.counters.filter(item=>item.found==0);
this.setState({counters:filteredData});

answered Apr 18, 2019 at 6:21

Jaydeep Galani

4,9713 gold badges31 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kumar · Accepted Answer · 2019-04-18 06:35:52Z

0

You can use the filter function of the array. Like this

var ages = [32, 33, 16, 40];

checkObj = (obj) => {
  return obj > 16;
}

let val = ages.filter(checkObj)

//val contains the filtered array with found == 0


// or you can use this way

let val = this.state.counters.filter((obj)=>{
              return obj.found == 0;
          })

Hope it helps, If I don't understand your problem. Please reply

edited Apr 18, 2019 at 6:35

answered Apr 18, 2019 at 6:20

Kumar

1,2171 gold badge19 silver badges32 bronze badges

Comments

avani kothari · Accepted Answer · 2019-04-18 06:54:12Z

0

you can use map function which returns a new array with operation taking place in its callback for every element.

function filterCounters(){
   let newCounters = [];
    counter.map(element=>{
    if(element.found === 0 ){
      newCounters.push(element);
      }
})
return newCounters;
}

edited Apr 18, 2019 at 6:54

answered Apr 18, 2019 at 6:31

avani kothari

7376 silver badges17 bronze badges

Comments

charlietango · Accepted Answer · 2019-04-18 07:21:30Z

0

You can use .filter and .map Array methods, but this isn't the only way.

Here is an example which does exactly what you need.

answered Apr 18, 2019 at 7:21

charlietango

4283 silver badges11 bronze badges

2 Comments

zimmerbimmer Over a year ago

Using map and filter at the same time actually helped me understand a lot. Thank yo so much!

charlietango Over a year ago

You are welcome! I encourage you to use map, filter and reduce as much as possible.

Collectives™ on Stack Overflow

How to filter items of an array displayed on the screen in React?

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related