ReactJS: Как установить состояние объекта, выбранного с помощью переключателя?

Question

В моем UsedComponents компоненте у меня есть список подключенных переключателей, каждый из которых возвращает componentType в качестве значения.

this.props.usedComponents.map((component, index) => (
  <RadioButton
    key={index}
    id={component.componentType}
    icon={ButtonIco}
    label={component.componentName}
    name="select"
    value={component.componentType}
    inputClass={classes.RadioInput}
    labelClass={classes.RadioLabel}
    selected={component.selected}
    handleChange={this.props.selectComponent}
  />
))

Мое состояние выглядит следующим образом:

constructor(props) {
  super(props);
  this.state = {
    components: components,
    usedComponents: [components[0], components[2], components[3]],
  };
  this.selectComponentHandler = this.selectComponentHandler.bind(this);
}

components - это импортированный массив объектов, каждый из которых выглядит примерно так:

{
  componentType: "headerLogoNavigation",
  componentName: "Header 02",
  padding: "small",
  fontSize: "small",
  fontColor: "#1f1f1f",
  fontFamily: "Sans-serif",
  backgroundColor: "#ffffff",
  image: placeholderLogo,
  selected: false,
  isEditing: false,
  margins: false,
  roundCorners: "none",
  mobile: "false"
}

В моем компоненте Page я пытаюсь передать selectComponentHandler реквизит моему компоненту UsedComponents, который долженвыберите компонент на основе значения выбранного переключателя и установите его состояние на selected: true.Для дополнительного бонуса он должен установить состояние любого ранее выбранного компонента на selected: false.
Пока мне удалось выяснить, как выбрать компонент, но я не могу обновить его состояние.Моя последняя попытка создать этот обработчик перед тем, как я сдался, выглядит следующим образом:

selectComponentHandler = event => {
  this.setState(prevState => {
    let selected = prevState.usedComponents.filter(item => item.componentType === event.target.value);
    selected.selected = 'true';  
    return { selected };
  });
};

, и это попытка отфильтровать prevState внутри setState для componentType, который соответствует event.target.value изпереключатель и установите его состояние, но я испортил логику или синтаксис, и моя голова вот-вот взорвется, поэтому я не могу понять, что я сделал неправильно.Может кто-нибудь помочь мне разобраться?

Answer 1

Я понял это.Это немного глупо, но работает.

selectComponentHandler = event => {
  const value = event.target.value;
  this.setState(prevState => {
    let selected = prevState.usedComponents.filter(item => item.componentType === value).shift();
    let unSelected = prevState.usedComponents.filter(item => item.selected === true).shift();
    if(unSelected) {
      unSelected.selected = false;
    }
    selected.selected = true;  
    return { unSelected, selected };
  });
};