filter an array with a button in React

Question

so I'm making a filtered list app where you can click on the buttons and it excludes all users with that letter in its name. This is what I have so far, but it doesn't work for me. Any help would be appreciated.

Also I keep getting this error ./src/index.js and its bringing up these error

detail list of errors

App.js

import React from 'react';
import "./App.css";
const buttons = [
  { name: "Reset", value: "Reset"},
  { name: "Bryan", value: "B"},
  { name: "Annie", value: "A"},
  { name: "Miles", value: "M"},
  
];
class User extends React.Component {
 constructor() {
   super();
   this.state = {
     users: [
       {
         name: "Bam",
       },
       {
         name: "Brinley",
       },
       {
        name: "Bart",
      },
      {
        name: "Brielle",
      },
      {
        name: "Booka",
      },
      {
        name: "Ann",
      },
      {
        name: "Analise",
      },
      {
        name: "Anthony",
      },
      {
        name: "Arrow",
      },
      {
        name: "Arika",
      },
      {
        name: "Marty",
      },
      {
        name: "Mike",
      },
      {
        name: "Minto",
      },
      {
        name: "Milk",
      },
      {
        name: "Monty",
      },
      {
        name: "Brett",
      },
      {
        name: "Byron",
      },
      {
        name: "Brad",
      },
      {
        name: "Bento",
      },
      {
        name: "Bark",
      },
     ]
     filterName: []
   };
 }
 componentDidMount() {
  this.setState({
    filterName: this.state.users
  });
}
handleClick = name => {
  let filterName = [];
  if (name === "All") {
    filterName = this.state.users;
  } else {
    filterName = this.state.users.filter(
      users => users.origin === name
    );
  }

  this.setState({ filterName });
};

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

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

export default App;

ttt · Accepted Answer · 2021-02-05 05:12:16Z

1

You have missed a comma before filterName

//more on top
  {
        name: "Bark",
  },
],
filterName: []

I have made the modification for your onClick function

handleClick = name => {
  let filterName = []
  const { users } = this.state;

  if (name && name !== "All") {
    filterName = users.filter(
      //no such property called origin, only 'name' occurs. Therefore, I assume that you mean you want to use name as the sorting criteria
      user => user.name === name
    );
  } else {
     // For name === 'all' && name === undefined cases
     filterName = users
  }

  this.setState({ filterName });
};

edited Feb 5, 2021 at 5:12

answered Feb 5, 2021 at 1:06

ttt

1,8091 gold badge12 silver badges26 bronze badges

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

2 Comments

Kelly codes Over a year ago

Thanks for the response, I inputed a comma there but my code still doesn't seem to work

ttt Over a year ago

Is there any error msg? Checked my updated answer for the handleClick function

sareno · Accepted Answer · 2021-02-05 01:06:52Z

0

It's a syntax error, you missed a comma before filterName: [].

answered Feb 5, 2021 at 1:06

sareno

7169 silver badges12 bronze badges

Collectives™ on Stack Overflow

filter an array with a button in React

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related