Попытка показать элемент массива реакции select в элементе списка - PullRequest
Новая
       83

Попытка показать элемент массива реакции select в элементе списка

0 голосов
/ 18 июня 2020

Я использую response-select для хранения нескольких элементов и использую функцию карты для отображения элементов, которая работает нормально. Но когда я использую тот же элемент в другом классе для отображения в элементе списка, он показывает пустой.

Вот код, в котором я показываю несколько вариантов. 

const Departments = [
  { label: "OneIT", value: "OneIT" },
  { label: "HR", value: "HR" },
  { label: "Vigilance", value: "Vigilance" },
  { label: "Ethics", value: "Ethics" },
  { label: "Corporate Services", value: "Corporate Services" },
  { label: "Legal", value: "Legal" },
  { label: "Sports", value: "Sports" },
  { label: "TQM", value: "TQM" },
  { label: "Iron Making", value: "Iron Making" },
  { label: "TMH", value: "TMH" }
];

class MultiSelect2 extends Component {
  state = {
    selectedOptions: []
  };
  handleChangeField = selectedOptions => {
    this.setState({ selectedOptions });
  };
  render() {
    const { selectedOption } = this.state;
    return (
      <div className="container">
        <div className="row">
          <div className="col-md-2"></div>
          <div className="col-md-8">
            <span>Select Department</span>
            <Select
              value={selectedOption}
              options={Departments}
              onChange={this.handleChangeField}
              isMulti
            />
            {this.state.selectedOptions.map(o => (
              <p>{o.value}</p>
            ))}
          </div>
          <div className="col-md-4"></div>
        </div>
      </div>
    );
  }
}

I Я пытаюсь отобразить это в другом классе в элементе списка, но он не отображается. 

export class Confirm extends Component {
  state = {
    selectedOptions: []
  };

 render() {
    const {
      values: {selectedOptions
      }
    } = this.props;
return (
<List>
            <ListItemText primary="Departments" secondary={selectedOptions} />
</List>
...