Как подсветить активный элемент списка на react?

Question

[Radoncheg]

добрый день. Новичок в реакт. Эксперементирую, ничего не получается. Нужно как можно проще сделать так, чтобы при клике на элемент списка, он менял свой цвет, а при выборе другого, возвращал обычный. У меня получилось, но подсвечиваются почему то сразу все элементы. Подскажите, пожалуйста, на примере вот такого вот кода? И можно сделать не через className, а через style?

import 'react', {Component} from React;
//css: .active{color:"darkblue"}
export default class App extends Component {

    state = {
       items : [id:1, content:"asdfasf", id:2, content:"asdfasfd"],
        isActive: false
     }
 render() {
        let x = '';
       const {items, isActive} = this.state; 
 return (
 <div  key={item.id} className={isActive ? x="active'} onClick "какой то код">
                        {Items.map(items => (
                            {item.content} );
</div>
);
}}

Answer 1

[0xD34F]

class App extends React.Component {
  state = {
    items: [
      { id:  69, text:  'hello, world!!' },
      { id: 187, text:  'fuck the world' },
      { id: 666, text: 'fuck everything' },
    ],
    active: null,
  }

  onClick = e => {
    this.setState({
      active: +e.target.dataset.index,
    });
  }

  render() {
    const { items, active } = this.state;

    return (
      <div>
        {items.map((n, i) => (
          <div
            key={n.id}
            data-index={i}
            className={i === active ? 'active' : ''}
            onClick={this.onClick}
          >{n.text}</div>
        ))}
      </div>
    );
  }
}

Comments

[Radoncheg]

почему то ругается на target.dataset.index говорит undefined 'dataset'

[0xD34F]

Radoncheg, кто говорит? Где говорит? Не вижу ничего подобного. Покажите.

Answer 2

[real2210]

items : [{id:1,content:"asdfasf",active: false}, {id:2,content:"asdfasfd",active: false}]

{items.map((item) =>
<div  key={item.id} className={item.active && x="active'} onClick "какой то код"> {item.content} </div>
 )}

Если максимально просто то так.
Если максимально просто и хорошо, то советую прочитать это