Two select dropdowns list - the second dropdown output will depend on the selected first select dropdown list

Cary Bondoc 0
Viewed 27

I'm using reactJS and I have here the choices for two select dropdown list names categories and items

constructor(props) {
    super(props)
  }
    this.state = {
      categories: [
        {
          "id": 1,
          "category_name": "Powertools"
        },
        {
          "id": 2,
          "category_name": "Consumables"
        }
      ],
      items: [
        {
          "id": 1,
          "item_name": "Grinder",
          "category_id": 1
        },
        {
          "id": 2,
          "item_name": "Drill",
          "category_id": 1
        },
        {
          "id": 3,
          "item_name": "Welding rod",
          "category_id": 2
        },
      ],
    };
  }

I'm trying to output the items dropdown list choices depending on the selected value of the categories dropdown list.

For example:

Dropdown 1 Selected Value: Powertools

Dropdown 2 choices: Grinder, Drill

Another example:

Dropdown 1 Selected Value: Consumables

Dropdown 2 choices: Welding rod

As of now, I've found this code snippet that does the thing that I want. Unfortunately, it's in a function component and I'm trying to convert it to a class component but with no success.

compare javascript-objects reactjs arrays javascript
1 Answers

I was guided by Sir. Rajesh and I were able to solve the problem.

Here's the code

import { Component } from 'react';

class Testing2 extends Component {
  constructor(props) {
    super(props)
    this.state = {
      categories: [
        {
          "id": 1,
          "category_name": "Powertools"
        },
        {
          "id": 2,
          "category_name": "Consumables"
        }
      ],
      items: [
        {
          "id": 1,
          "item_name": "Grinder",
          "category_id": 1
        },
        {
          "id": 2,
          "item_name": "Drill",
          "category_id": 1
        },
        {
          "id": 3,
          "item_name": "Welding rod",
          "category_id": 2
        },
      ],
      form_transactions: [],
      filteredItems: []
    };
  }


  handleChange_transactions = event => {
    const { name, value } = event.target;
    let form = this.state.form_transactions;
    form[name] = value;
    this.setState({ form });

    const state_filteredItemNames = this.state.items.filter(element => element.category_id == value);
    this.setState({ filteredItems: state_filteredItemNames });
  }

  render() {

    //list categories
    const list_categories = this.state.categories.map(data =>
      <option
        value={data.id}
        key={data.id}
      >
        {data.category_name}
      </option>
    )

    const list_items = this.state.filteredItems.map(data =>
      <option
        value={data.id}
        key={data.id}
      >
        {data.item_name}
      </option>
    )

    return (
      <>
        <form>
          <div>
            <select onChange={this.handleChange_transactions}>
              {list_categories}
            </select>
          </div>
          <div>
            <select>
              {list_items}
            </select>
          </div >
        </form >
      </>
    )
  }
}

export default Testing2;

Output:

enter image description here

Cary Bondoc0
Related