Выборочный вывод в реакции-выбора

Question

Я использую реагирование, и я новичок. У меня есть компонент с именем Example

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

class Example extends React.Component {
  state = {
    selectedOption: null
  };

  render() {
    const { onHandleChange, options } = this.props;
    return <Select onChange={onHandleChange} options={options} isMulti />;
  }
}

export default Example;

В другом файле у нас есть функциональный Компонент

import React, { useState } from "react";
import Example from "./Example";
import { regionOptions, ageOptions, bordOptions } from "./Options";

export default function UserProfile() {
  const [selectedOption, setSelectedOption] = useState({
    region: "",
    age: "",
    bord: ""
  });

  const handleChange = (key, selectedOption) => {
    setSelectedOption(prev => ({ ...prev, [key]: selectedOption }));
  };
  console.log(Object.values(selectedOption));

  return (
    <div>
      <Example
        id="region"
        onHandleChange={value => handleChange("region", value)}
        selectedOption={selectedOption.region}
        options={regionOptions}
      />
      <Example
        id="age"
        onHandleChange={value => handleChange("age", value)}
        selectedOption={selectedOption.age}
        options={ageOptions}
      />
      <Example
        id="bord"
        onHandleChange={value => handleChange("bord", value)}
        selectedOption={selectedOption.bord}
        options={bordOptions}
      />
    </div>
  );
}

Я отображаю значения в консоли по событию handChange. Но когда параметры увеличиваются, я не могу сказать, какой из них принадлежит.

Я хочу console.log вместо [Array [n], Array [n], Array [n]]

Будет отображаться что-то подобное [Region [n], age [n], bord [n]]

Вы можете увидеть мой код здесь https://codesandbox.io/s/upbeat-night-tqsk7?file= / src / UserProfile. js: 0-1040

Answer 1

Что вы можете сделать, это создать пользовательский хук и внести следующие изменения.

// custom hook

    function useFormInput(initial) {
      const [value, setValue] = useState(initial);

      const handleOnChange = e => {
        setValue(e);
      };

      return {
        selectedOptions: value,
        onChange: handleOnChange
      };
    }

затем в коде

export default function UserProfile() {
  const region = useFormInput(""); // return { selectedOption, onChange }
  const age = useFormInput("");
  const bord = useFormInput("");

  // NB {...region}  pass deconstructed return values from custom hook to the component
  return (
    <div>
      <Example id="region" {...region} options={regionOptions} />
      <Example id="age" {...age} options={ageOptions} />
      <Example id="bord" {...bord} options={bordOptions} />
      {JSON.stringify(region.selectedOptions)}
      {JSON.stringify(age.selectedOptions)}
      {JSON.stringify(bord.selectedOptions)}
    </div>
  );
}

// your UI component

  render() {
    const { onChange, options } = this.props;
    return <Select onChange={onChange} options={options} isMulti />;
  }

рабочий пример

https://codesandbox.io/s/optimistic-napier-fx30b?

Answer 2

просто используйте

console.log(selectedOption);

вместо

console.log(Object.values(selectedOption));