How can I update State in React using the React-Select Component and User Selection?

Question

I'm trying to update a State in my project based on a User Selection from a dropdown menu.

I passed the 2 states (roomType & occupants) along with their setter/change functions (onRoomTypeChange & onOccupantsChange) from the parent Component.

I’ve tried to read through the React Select Library, but having trouble.

Wondering if someone could point me in the right direction.

import React from 'react';
import Select from 'react-select';

const roomOptions = [
  { value: 'Standard', label: 'Standard' },
  { value: 'Delux', label: 'Delux' }
];

const occupantOptions = [
  { value: 1, label: '1' },
  { value: 2, label: '2' },
  { value: 3, label: '3' },
  { value: 4, label: '4' },
];

const RoomDetails = (props) => {
  let {
    roomType,
    onRoomTypeChange,
    occupants,
    onOccupantsChange
  } = props;

  const handleChange = (e) => {
    onRoomTypeChange(e.target.value);
  };

  return (
    <div>
      <div className="form-group">
        <label className="select-label">Room Type: {roomType} </label>
        <Select
          // value={e.target.value}
          onChange={handleChange}
          options={roomOptions}
          theme={theme}
        />

        <label className="select-label">Guests: {occupants}</label>
        <Select
          value={occupants}
          onDatachange={onOccupantsChange}
          options={occupantOptions}
          theme={theme}
        />

      </div >
    </div>
  );
};

export default RoomDetails;

Answer 1

I resolved the and wanted to post an update:

I had installed another package called “react-dropdown-select” that I removed from my package.json, I believe was interfering with my react-select package . The return object was not an event, it was the selected object from the corresponding options array. I destructured the value property in the parameter and used the Setter Function on the value only. I originally included a Value= attribute on the Select Component, which was set to my current state value

 <Select
            value={stateProperty}
  /> 

When I removed the Value attribute, the bug was gone

(Here is the solution)

import React from 'react';
import Select from 'react-select';

const roomOptions = [
  { value: 'Standard', label: 'Standard' },
  { value: 'Delux', label: 'Delux' }
];

const occupantOptions = [
  { value: 1, label: '1' },
  { value: 2, label: '2' },
  { value: 3, label: '3' },
  { value: 4, label: '4' },
];


const RoomDetails = (props) => {
  let {
    onRoomTypeChange,
    onOccupantsChange
  } = props;

  const handleChangeRoom = ({ value }) => {
    console.log(value);
    onRoomTypeChange(value);
  };

  const handleChangeOccupants = ({ value }) => {
    console.log(value);
    onOccupantsChange(value);
  };

  return (
    <div>
      <div className="form-group mb-2">
        <span className="form-label mt-3">Room Type </span>

        <Select
          onChange={handleChangeRoom}
          options={roomOptions}
          theme={theme}
          placeholder="Room Type"
        />

        <span className="form-label mt-3">Guests</span>
        <Select
          onChange={handleChangeOccupants}
          options={occupantOptions}
          theme={theme}
          placeholder="Number of Guests"
        />
      </div >
    </div>
  );
};

export default RoomDetails;