How to conditionally add react attributes?

Question

React

Good day.
There is a component that is responsible for displaying pagination.
In the return of the component, pagination is output as follows:

return (
            <div className = "Question-list">
                {this.props.data.map((value, index) => <li onClick = {this.setChosenQuestionNumber}
                                                           key = {this.props.data[index]['id']}
                                                           className="Question-list-item">
                                                                <span className="question-list-number">{index + 1}
                                                                </span>
                                                           </li>)}
            </div>
        )

Depending on the props (array) coming to the component, you need to assign a particular class to the pagination button ( ). Please tell me how to do it. <li>

Answer 1

Option 1 :
where someCondition is a condition, for example:
You pass an element as the first argument in the map call , but you access it through an array: a very illogical move, correct it to:
key = {value.id}

Answer 2

return (
    <div className="Question-list">
        {this.props.data.map((value, index) => {
            const cn = []

            if (value === 1) {
                cn.push('Question-list-item--current')
            }
            else {
                cn.push('Question-list-item')
            }

            return <li onClick={this.setChosenQuestionNumber} key={value.id} className={cn.join(' ')}>
                <span className="question-list-number">{index + 1}</span>
            </li>
        })}
    </div>
)