Swap two input fields (react-select)

[teifler]

Hey fellow hackers,

As you can see below I have two react select input fields and on the click on the button I want to swap the two input fields so that To swaps with From. What is the best way to manipulate the input field to do that? Can I save it somehow and swap it out with useRef for Example?

Any help is much appreciated,
Tim

[manjushsh]

@teifler Something like this?

  const [option, updateOption] = useState(null);
  const [secondOption, updateSecondOption] = useState(null);
  
  const onSwap = () => {
    const tempStore = secondOption;
    updateSecondOption(option);
    updateOption(tempStore);
    // Calulation logic...
  };

Component:

const SimpleSelect = ({
  option,
  updateOption,
  secondOption,
  updateSecondOption,
  onSwap
}) => {
  const options = [
    { value: "121", label: "121" },
    { value: "122", label: "122" },
    { value: "123", label: "123" }
  ];

  return (
    <div className="App">
      <h3>Second React Select</h3>
      <Select
        // menuIsOpen={true}
        value={secondOption}
        onChange={updateSecondOption}
        options={options}
      />
      <br />
      <button className="btn btn-primary" onClick={onSwap}>
        Swap
      </button>
      <br />
      <br />
      <Select
        // menuIsOpen={true}
        value={option}
        onChange={updateOption}
        options={options}
      />
    </div>
  );
};

Code Sandbox

[teifler]

Thank you very much! Thats exactly what I need but I dont understand the codepen complelty. Why are there two returns in the codepen? I struggle with that since a couple of hours now -.-

Below is my code where I need to add the functionality.
teifler/capstone-project@eb37432#diff-55a5c99aef9d08f686c49b7d705cc616f4add4722c1ba86869dc3917a5424a48

[manjushsh]

refer above code.. I added code sandbox just to show running demo. First return is for main component and second return for SimpleSelect component.

[teifler]

Cheers I fixed the issue thank you very much for your help! :)