Как правильно сделать выборку ref (React)?

Question

[gsdev99]

Всем привет. Ребята, подскажите, пожалуйста, как сделать выборку ref.
Как мне вместо вот этого правильно выбрать коллекцию:
const list = [...document.querySelectorAll('.list__item')];
Идея в том, что при нажатии на next (например) мне необходимо первому list__item, например добавить class, и также второму.

import React from "react";

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      items: [
        {id: 1},
        {id: 2},
        {id: 3},
        {id: 4},
        {id: 5},
        {id: 6},
        {id: 7},
        {id: 8},
        {id: 9},
        {id: 10}
      ]
    };
  }

  nextHandler = () => {

  };

  prevHandler = () => {

  };

  render() {
    return (
      <React.Fragment>
        <ul className="list">
          {
            this.state.items.map((item) => {
              return (
                <li
                  key={item.id}
                  className="list__item"
                >
                  <div className="list__item">
                    key={item.id}
                  </div>
                </li>
              );
            })
          }
        </ul>

        <div className="controls">
          <button type="button" onClick={this.prevHandler}>prev</button>
          <button type="button" onClick={this.nextHandler}>next</button>
        </div>
      </React.Fragment>
    );
  }
};

export default App;

Answer 1

[Антон Спирин]

Зачем вам ref каждого элемента списка? Работайте с состоянием. Большинство задач в React-разработке решаются без прямого обращения к DOM-элементам.

Уберите this.init() из render и никогда так не делайте. Почитайте о жизненном цикле компонента.

Comments

[gsdev99]

Идея в том, что при нажатии на next (например) мне необходимо первому list__item, например добавить class, и также второму.

[hzzzzl]

gsdev99, предлагаю как-то так

this.state = {
....
active: 0
    };

  nextHandler = () => {
// тут добавить this.state.active + 1
  };

...

this.state.items.map((item, index) => {
              return (
                <li
                  key={item.id}
                  className=`list__item ${index === active ? 'active-class' : ''} ${index === active + 1 ? 'after-active-class' : ''}`
                >
                </li>
              );

[Антон Спирин]

gsdev99, учитесь работать с состоянием.

{this.state.items.map((item) => (
  <li
    key={item.id}
    className={item.isActive ? 'list__item list__item--active' : 'list__item'}
  >
    <div className="list__item">
      key={item.id}
    </div>
  </li>
))}

[gsdev99]

Спасибо.