Как включить / отключить элементы из массива в React JS?

Question

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

В настоящее время только один элемент из массива может быть включен (показан зеленым цветом), однако я хотел бы иметь возможность включать / выключать каждый элемент по отдельности.

Взаимодействие с одним элементом не должно влиять на другие.

Как мне этого добиться?

Событие моего клика:

  handleOnClick = (val, i) => {
    this.setState({active: i}, () => console.log(this.state.active, 'active'))
  }

Отображение полей:

 renderBoxes = () => {

    const options = this.state.needsOptions.map((val, i) => {
        return (
          <button
            key={i}
            style={{...style.box, background: i === this.state.active ? 'green' : ''}}
            onClick={() => this.handleOnClick(val, i)}
          >
            {val}
          </button>
        )
      })

      return options

  }

Вот кодекс

Answer 1

Что я хотел бы сделать, это создать компонент Box с собственным активным состоянием и передать его на карту в renderBoxes. Преимущество этого состоит в том, что каждый компонент Box будет иметь свое собственное состояние, независимое от родительского. Таким образом, вы можете иметь более одного активного компонента.

так ...

class Box extends React.Component {
  constructor(props){
    super(props)
    this.state={
      active: false
    }
  }

  clickHandler = () => {
    this.setState({active: !this.state.active})
  }

  render(){
    const { key, children }= this.props
    return (
      <button
            key={key}
            style={{...style.box, background:     this.state.active ? 'green' : ''}}
            onClick={() => this.clickHandler()}
          >
            {children}
          </button>
    )
  }
}

тогда пусть renderBoxes будут ...

renderBoxes = () => {

    const options = this.state.needsOptions.map((val, i) => {
        return (
          <Box
            key={i}
          >
            {val}
          </Box>
        )
      })

      return options

  }

вот кодекс Я раздвоил твой.