Как изменить стиль конкретного элемента из массива в React?

Question

**** У меня есть реагирующий компонент, который не работает должным образом, я ожидаю нажатия на элемент li, и только этот элемент изменит цвет, однако, когда я нажимаю на него, каждый элемент с таким же индексом меняет цвет: ****

Итак, каждый элемент question.answersArray [0] после функции карты меняет цвет, когда я нажимаю на него, что я делаю неправильно?

import React, { Component } from 'react'
import {connect} from 'react-redux'
import './Questions.css'
import {fetchProducts1} from './redux_store/actions/actionfetchcontent'


class Questions extends Component {  
    constructor(props){
        super(props)
        this.state ={
          bgColor: '',
          clicked: false,
        }
        // this.handleClick = this.handleClick.bind(this);
      }
      handleClick = e => {
        console.log(e.currentTarget.dataset.id );
        this.setState({
          bgColor: 'green',
          clicked: true
        })

      }



    componentDidMount() {
        this.props.dispatch(fetchProducts1());
      }
    fetchFunction () {
        if (this.props.questionsFetch === undefined){
          return <div>Followers Undefined...</div>;
        }
        return this.props.questionsFetch.map((question) => {
            return (
                <div className='questions_main'>
                <br />
                    <article                     
                     >{question.question}
                     <br />
                     </article>
                     <br />
                     <div className="answers"> 
                     <label for="answer-select"></label>
                     <br />
                    <ul id="answer-select">
                            <li data-id="1"
                                onClick={this.handleClick}
                            style={{ backgroundColor: this.state.bgColor }}
                            ><span>A</span><p>{question.answersArray[0]}</p>
                            </li>
                    <li data-id="2"><span>B</span> <p>{question.answersArray[1]}</p></li>
                    <li data-id="3"><span>C</span> <p>{question.answersArray[2]}</p></li>
                    <li data-id="4"><span>D</span> <p>{question.answersArray[3]}</p></li>
                    </ul>
                    </div>
                </div>
            )
        })
    }






    render() {
        return (
            <div>
                {this.fetchFunction()}
            </div>
        )
    }
}

const mapStateToProps = state => ({
    questionsFetch: state.fetched.items,
    loading: state.fetched.loading,
    error: state.fetched.error
  });



 export default connect(mapStateToProps)(Questions);

Answer 1

Проблема, с которой вы здесь сталкиваетесь, заключается в том, что вы сохраняете только одно значение цвета фона, и в случае щелчка вы просто заполняете это поле в состоянии, чтобы не было сопоставления цвета с отдельным элементом li.

В соответствии с этими требованиями

Я ожидаю при нажатии на элемент li, и только этот элемент изменит цвет

Так что для достижения этого вам нужнохранить в состоянии индекс активного li элемента

Примерно так должно работать:

<ul id="answer-select">
  { 
    question.answersArray.map((answer, index) => (
      <li 
        data-id={index}
        onClick={() => this.setState({ activeIndex: index })}
        style={ index === this.state.activeIndex ? { backgroundColor: this.state.bgColor } : null}
      >
        <span>{ String.fromCharCode(65 + index) }</span><p>{ answer }</p>
      </li>
    )) 
  }
</ul>