How to filter an array onClick in React

Question

I am trying to filter an array of coffee based on its origin via a button click in React. Right now, whenever a button is clicked the array goes to 0 instead of the desired result of however many items contain the origin clicked. Thanks for your help. Feel free to critique my code as well - I am just beginning!


class Coffee extends React.Component {

  constructor() {
    super();
    this.state = { coffees: [
  {
    name: 'Banko',
    origin: 'Ethiopia',
    price: 16
  },
  {
    name: 'Pueblo',
    origin: 'Costa Rica',
    price: 14
  },
  {
    name: 'Don Pablo',
    origin: 'Columbia',
    price: 13
  },
  {
    name: 'Hava Lama',
    origin: 'Columbia',
    price: 15
  },
  {
    name: 'Guillermo Salva',
    origin: 'Ethiopia',
    price: 19
  },
  {
    name: 'Salla Rosa',
    origin: 'Kenya',
    price: 20
  },
  {
    name: 'Santor Gustavio',
    origin: 'Panama',
    price: 25
      }
     ] 
    }
   }

  handleClick = event => {
    const byOrigin = event.target.value

    const filterCoffee = this.state.coffees.filter(coffee => coffee[origin] === [byOrigin])
    this.setState({coffees: filterCoffee})

  }


  render() {

    const renderAll = this.state.coffees.map(coffee => <li key={Date.now()}>{coffee.name}</li>)


    return (

      <div>
        <button value='all' onClick={this.handleClick}>All</button>
        <button value='Ethiopia' onClick={this.handleClick}>Ethiopia</button>
        <button value='Costa Rica' onClick={this.handleClick}>Costa Rica</button>
        <button value='Kenya' onClick={this.handleClick}>Kenya</button>
        <button value='Columbia' onClick={this.handleClick}>Columbia</button>
        <button value='Panama' onClick={this.handleClick}>Panama</button>


        <p>Coffee: {renderAll}</p>
        <p>{this.state.coffees.length}</p>

      </div>

    )
  }
}

ReactDOM.render(<Coffee />, document.getElementById('root'))

try this check like this this.state.coffees.filter(coffee => coffee[origin] === byOrigin) — Nouman Janjua
– Nouman Janjua, Commented Dec 2, 2019 at 4:15
Try change to .filter(coffee => coffee.origin === byOrigin) — thortsx
– thortsx, Commented Dec 2, 2019 at 4:15
One more thing, once this array is filtered by a origin, than you will not be able to get data for other origins — Nouman Janjua
– Nouman Janjua, Commented Dec 2, 2019 at 4:20

Narendra Chouhan · Accepted Answer · 2019-12-02 04:21:35Z

2

You can check like this, please try this.

this.state.coffees.filter(coffee => coffee['origin'] === byOrigin)

answered Dec 2, 2019 at 4:21

Narendra Chouhan

2,3091 gold badge17 silver badges25 bronze badges

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

2 Comments

ravibagul91 Over a year ago

This provides a partial answer.

Narendra Chouhan Over a year ago

Why are you booing me? I m right. I just point where he is making a mistake and yes I respect your opinion.

akhtarvahid · Accepted Answer · 2019-12-02 05:07:45Z

Optimized way

const buttons = [
  { name: "All", value: "All" },
  { name: "Ethiopia", value: "Ethiopia" },
  { name: "Costa Rica", value: "Costa Rica" },
  { name: "Kenya", value: "Kenya" },
  { name: "Columbia", value: "Columbia" },
  { name: "Panama", value: "Panama" }
];

define button in loop for optimization

        {buttons.map(({ name, value }) => (
          <button
            key={name}
            value={value}
            onClick={this.handleClick.bind(this, name)}
          >
            {name}
          </button>
        ))}

Complete code

const buttons = [
  { name: "All", value: "All" },
  { name: "Ethiopia", value: "Ethiopia" },
  { name: "Costa Rica", value: "Costa Rica" },
  { name: "Kenya", value: "Kenya" },
  { name: "Columbia", value: "Columbia" },
  { name: "Panama", value: "Panama" }
];
class Coffee extends React.Component {
  constructor() {
    super();
    this.state = {
      coffees: [
        {
          name: "Banko",
          origin: "Ethiopia",
          price: 16
        },
        {
          name: "Pueblo",
          origin: "Costa Rica",
          price: 14
        },
        {
          name: "Don Pablo",
          origin: "Columbia",
          price: 13
        },
        {
          name: "Hava Lama",
          origin: "Columbia",
          price: 15
        },
        {
          name: "Guillermo Salva",
          origin: "Ethiopia",
          price: 19
        },
        {
          name: "Salla Rosa",
          origin: "Kenya",
          price: 20
        },
        {
          name: "Santor Gustavio",
          origin: "Panama",
          price: 25
        }
      ],
      filterCoffee: []
    };
  }

  componentDidMount() {
    this.setState({
      filterCoffee: this.state.coffees
    });
  }

  handleClick = name => {
    let filterCoffee = [];
    if (name === "All") {
      filterCoffee = this.state.coffees;
    } else {
      filterCoffee = this.state.coffees.filter(
        coffee => coffee.origin === name
      );
    }

    this.setState({ filterCoffee });
  };

  render() {
    const renderAll = this.state.filterCoffee.map(coffee => (
      <li key={coffee.name}>{coffee.name}</li>
    ));
    return (
      <div>
        {buttons.map(({ name, value }) => (
          <button
            key={name}
            value={value}
            onClick={this.handleClick.bind(this, name)}
          >
            {name}
          </button>
        ))}

        <p>Coffee: {renderAll}</p>
        <h2>{this.state.filterCoffee.length}</h2>
      </div>
    );
  }
}

ravibagul91 · Accepted Answer · 2019-12-02 04:24:49Z

You should have a separate array of original coffees. On component mount, you must copy your original array into another array and use that array further.

this.state = {
    coffees: [{
            name: 'Banko',
            origin: 'Ethiopia',
            price: 16
        },
        {
            name: 'Pueblo',
            origin: 'Costa Rica',
            price: 14
        },
        {
            name: 'Don Pablo',
            origin: 'Columbia',
            price: 13
        },
        {
            name: 'Hava Lama',
            origin: 'Columbia',
            price: 15
        },
        {
            name: 'Guillermo Salva',
            origin: 'Ethiopia',
            price: 19
        },
        {
            name: 'Salla Rosa',
            origin: 'Kenya',
            price: 20
        },
        {
            name: 'Santor Gustavio',
            origin: 'Panama',
            price: 25
        }
    ],
    filterCoffee: []  //create another array
}

On component mount copy original array to a temparary array

componentDidMount(){
   this.setState({
     filterCoffee: this.state.coffees
   })
}

Now use filterCoffee to render

const renderAll = this.state.filterCoffee.map(coffee => <li key={coffee.name}>{coffee.name}</li>)

Finally on click you must check the condition when you click on all button,

handleClick = event => {
    const byOrigin = event.target.value
    let filterCoffee = []
    if(event.target.value === 'all'){
      //If clicked on all button copy the original array as it is
      filterCoffee = this.state.coffees   
    } else{
      // If clicked on any other button filter the original array based on value
      filterCoffee = this.state.coffees.filter(coffee => coffee.origin === byOrigin)
    } 
    this.setState({filterCoffee})
}

Demo

Collectives™ on Stack Overflow

How to filter an array onClick in React

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related