react.js react-select onselected value change another select value and submit multiple items to array

Question

I have stomped on a problem that i don't know how to resolve. I have a react-select input that passes a selected value to another select input. When a user clicks on submit button then i have to display an array of every selector input that the user has selected as a list of items and then the form should reset all select values. For this, i have tried submitting to an array but it only shows one item from all selectors and form doesn't reset its values. Here is a sandbox link https://codesandbox.io/s/awesome-carson-i99g8p?file=/src/App.js How can I archive this I have tried everything but I could not figure out how can i archive this functionality.

Answer 1

Ok. First tricky thing of react-select is, the value you assign to the component must be an object with label and valueproperties, not just the value. Meaning, when handling change events, you should set the state using the full event object.

This is the code mostly fixed:

import React, { useState, useEffect } from "react";

import Select from "react-select";
const options = [
  { value: "0", label: "0" },
  { value: "1", label: "1" },
  { value: "2", label: "2" }
];

const options2 = [
  { value: "Before Due Date", label: "Before Due Date" },
  { value: "After Due Date", label: "After Due Date" }
];

const App = (props) => {
  const [numOfDays, setNumOfDays] = useState('');
  const [beforeDueDate, setBeforeDueDate] = useState('');

  const [items, setItems] = useState([]);

  const [reminders, setReminders] = useState([]);

  const submit = (event) => {
    event.preventDefault(); // <-- prevent form submit action

    const obj = {};
    obj.id = reminders.length + 1;
    obj.numOfDays = numOfDays.value;
    obj.beforeDueDate = beforeDueDate.value;

    setReminders((items) => [...items, obj]); // <-- update arr state

    setBeforeDueDate("");
    setNumOfDays("");
  };

  function numOfDaysHandle(event) {
    // const numOfDays = event.value;
    setNumOfDays(event);
    setItems((items) => [...items, items]);
  }

  function beforeDueDateHandle(event) {
    // const value = event.value;
    setBeforeDueDate(event);
  }

  const removeReminder = (id) => {
    setReminders(reminders.filter((item) => item.id !== id));
  };

  return (
    <>
      <form>
        <div>
          {reminders.map((item, index) => (
            <div key={index}>
              <div>
                <span>
                  {item.numOfDays} days {item.beforeDueDate}
                </span>
                <button onClick={() => removeReminder(item.id)}>
                  removeItem
                </button>
              </div>
            </div>
          ))}
        </div>

        <div>
          <Select
            options={options}
            value={numOfDays}
            id="numOfDays"
            placeholder="Days"
            isSearchable={false}
            //onChange={numOfDaysHandle}
            onChange={numOfDaysHandle}
          />

          <Select
            options={options2}
            value={beforeDueDate}
            id="beforeDueDate"
            placeholder="Before Due Date"
            isSearchable={false}
            onChange={beforeDueDateHandle}
          />
        </div>

        {items.map((item, index) => (
          <div key={index}>
            <Select
              options={options}
              value={item.numOfDays}
              id="numOfDays"
              placeholder="Days"
              isSearchable={false}
              onChange={numOfDaysHandle}
            />

            <Select
              options={options2}
              value={item.beforeDueDate}
              id="beforeDueDate"
              placeholder="Before Due Date"
              isSearchable={false}
              onChange={beforeDueDateHandle}
              //    onClick={() => setItems((items) => [...items, items])}
            />
          </div>
        ))}

        <button
          onClick={submit}
          //disabled={!numOfDays}
        >
          Set Reminder
        </button>
      </form>
    </>
  );
};

export default App;

Please see if you can move forward now, I could not understand what you want exactly with the array of <Select /> elements.