How can I pass two option arrays for the same dropdown component in react js?

Question

I want to reuse my dropdown component in two other containers by passing two different set of array.

Example: One dropdown menu used for creating a breakfast option menu and the other for dinner option menu.

I've tried creating two arrays in state part of the class. but when i call the array it shows no options

class DropDownDropper extends React.Component {

    constructor(props){
      super(props);
      this.state = {options: [
        breakfast: [
          { label: "Location 1", value: 1 },
          { label: "Location 2", value: 2 },
          { label: "Location 3", value: 3 },
          { label: "Location 4", value: 4 },
          { label: "Location 5", value: 5 },
          { label: "Location 6", value: 6 },
        ] , 
        dinner: [
          { labe: "Venue 1", value: 1 },
          { labe: "Venue 2", value: 1 },
          { labe: "Venue 3", value: 1 },
          { labe: "Venue 4", value: 1 },
          { labe: "Venue 5", value: 1 },
      ]
        ]
    }
    }

  render() {
    return(
      <div className="container">
      <div className="row">
        <div className="col-md-4"></div>
        <div className="col-md-4">
            <Select options = { this.props.options
           } />
        </div>
        <div className="col-md-4"></div>
      </div>
    </div>
    );
  }
}

Answer 1

here my solution for you :

App.js

    import React from "react";
import ReactDOM from "react-dom";
import Dropdown from "./Dropdown";
import "./styles.css";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      categories: [
        {
          name: "Breakfast",
          options: [
            { label: "Location 1", value: 1 },
            { label: "Location 2", value: 2 },
            { label: "Location 3", value: 3 },
            { label: "Location 4", value: 4 },
            { label: "Location 5", value: 5 },
            { label: "Location 6", value: 6 }
          ]
        },
        {
          name: "dinner",
          options: [
            { label: "Venue 1", value: 1 },
            { label: "Venue 2", value: 1 },
            { label: "Venue 3", value: 1 },
            { label: "Venue 4", value: 1 },
            { label: "Venue 5", value: 1 }
          ]
        }
      ]
    };
  }
  render() {
    return (
      <div className="App">
        {this.state.categories.map(cat => (
          <Dropdown options={cat.options} title={cat.name} />
        ))}
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

i have recreated your state because you cannot create a array inside array ! you need object for that. so state has a categories array which has name and options.

Dropdown.js

    import React from "react";

const Dropdowm = ({ options, title }) => (
  <div>
    <h1>{title}</h1>
    <select>
      {options.map(option => (
        <option value={option.value}>{option.label}</option>
      ))}
    </select>
  </div>
);

export default Dropdowm;

codesandbox