Как реализовать данный код в React?

Question

[Kerhin]

Как реализовать приведенный ниже код в React приложение?

При клике на один из оранжевых блоков, ему начинает присваиваться специальный класс (.active), который помечает блок как выбранный (перекрашивая его {border} в красный цвет), также параллельно данные из выбранного блока копируются с помощью "innerHTML" в элемент с классом "result". При этом, если в дальнейшем кликнуть на другой оранжевый блок, то произойдет смена данных в элементе "result" на те, которые содержаться в новом выбранном блоке.

HTML

<div class="wrap">
  <div class="wrap__el">
    <div class="info">
      <ul>
        <li>Lorem Ipsum is simply dummy text</li>
        <li>Lorem Ipsum is simply dummy text</li>
      </ul>
    </div>
  </div>

  <div class="wrap__el">
    <div class="info">
      <ul>
        <li>It is a long established fact that a reader</li>
        <li>It is a long established fact that a reader</li>
      </ul>
    </div>
  </div>

  <div class="wrap__el">
    <div class="info">
      <ul>
        <li>Contrary to popular belief</li>
        <li>Contrary to popular belief</li>
      </ul>
    </div>
  </div>
</div>

<div class="result"></div>

CSS

.wrap {
  display: flex;
}
.wrap__el {
  width: 33%;
}
.wrap__el, .result {
  margin: 20px 10px;
  border: 10px solid #ffa500;
}
.result {
  border-color: #000;
}
.active {
  border-color: #ff0000;
}

JS

var output = document.querySelector(".result");
var clickEl = document.getElementsByClassName("wrap__el");
for (var i = 0; i < clickEl.length; i++) {
  clickEl[i].addEventListener("click", function() { 
    var x = document.getElementsByClassName("wrap__el");
    Array.prototype.forEach.call(x, function(el) {
      el.classList.remove("active");
      output.innerHTML = '';
    });

    this.classList.add('active');
    output.innerHTML = this.innerHTML;
  });
}

Answer 1

[0xD34F]

const Block = ({ items }) => (
  <div className="info">
    <ul>{items.map(n => <li>{n}</li>)}</ul>
  </div>
);

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

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

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

    return (
      <div>
        <div className="wrap">
          {items.map((n, i) => (
            <div
              className={`wrap__el ${i === selected ? 'active' : ''}`}
              onClick={this.onClick}
              data-index={i}
            >
              <Block items={n} />
            </div>
          ))}
        </div>
        <div className="result">
          {selected !== null ? <Block items={items[selected]} /> : null}
        </div>
      </div>
    );
  }
}

Comments

[Kerhin]

Спасибо большое за решение. Хотел также параллельно вопрос задать по поводу массива.
Что если я использую свой личный многомерный массив, то мне просто следует его заменить в разделе "state", и ниже изменить способ вывода данного массива (относительно самой специфики массива)?

[0xD34F]

Kerhin, зачем спрашивать, если можно просто попробовать? Меняйте массив, меняйте "способ вывода", смотрите, что будет получаться.