Creating a filter for a drop down menu in React-CodePudding

I'm working on practicing with React and I'm creating a drop down menu, but in that when a user clicks on either a fruit or a vegetable, it'll filter and show on the page which item was selected.

I'm a little confused as my thought process was creating the changeItem method to filter out those specific items and call that as apart of the onChange in the HTML render, but I'm not sure if this is the correct way of approaching this and it's currently not rendering anything at the moment.

Any guidance would be appreciated

This is the code that I have so far:

class ItemList extends React.Component {
  constructor(props) {
    super(props)
this.changeItem = this.changeItem.bind(this)
this.state = {
value: 'all' // this would be the initial value
}
    changeItem(event) {
this.setState({value: event.target.value} // where the value will be changed 
}
  }

  render() {
    return (
      <>
      <select onChange={this.changeItem} value:{event.target.value}>
        <option value='all'>all</option>
        <option value='cats'>fruits</option>
        <option value='dogs'>vegetables</option>
      </select>
        <div className="item-list">
          {this.props.items.map((item) =>
          <SingleItem key={item.id}
          item={item} />
          )}
        </div>
      </>
    );
  }
}

CodePudding user response：

I have prepared a sample which I think it will help you

import React from "react";

function SingleItem({ item }) {
  return <div>{item?.type}</div>
}

class ItemList extends React.Component {
  currentType = "";

  constructor(props) {
    super(props)
    this.changeItem = this.changeItem.bind(this)
    this.state = {
      currentType: "all"
    }
  }

  changeItem(event) {
    this.setState({ currentType: event.target.value }) // where the value will be changed 
  }

  filter(list) {
    switch (this.state.currentType) {
      case "cats":
        return list.filter(i => i.type === "cats");
      case "dogs":
        return list.filter(i => i.type === "dogs");
      default:
        return list;
    }
  }

  render() {
    return <React.Fragment>
      <select onChange={this.changeItem}>
        <option value='all'>all</option>
        <option value='cats'>fruits</option>
        <option value='dogs'>vegetables</option>
      </select>
      <div className="item-list">
        {this.props.items && this.filter(this.props.items).map((item) => <SingleItem key={item.id} item={item} />
        )}
      </div>
    </React.Fragment>
  }
}

export default function Page() {
  let items = [
    {
      id: 1,
      type: "cats",
      name: "black cat"
    },
    {
      id: 2,
      type: "cats",
      name: "white cat"
    },
    ,
    {
      id: 3,
      type: "dogs",
      name: "Yellow dog"
    }
  ];

  return <ItemList items={items} />
}

CodePudding user response：

I see a few different questions here, but I'll try to explain everything in a way that makes sense.

I'm going to suggest using