How to implement this code in React?

Question

JavaScript

Hello.
I would like to ask knowledgeable people how to implement the code below in a React application? It's just that the problem is that I still have a fairly superficial understanding of React and Babel syntax. And the code itself may be needed soon in the implementation together with React. (And I myself have already begun to get very confused in an attempt to implement)
The essence of the function itself is very simple.
When you click on one of the orange blocks, a special class (.active) is assigned to it, which marks the block as selected (by repainting it {border} in red), and in parallel, the data from the selected block is copied using "innerHTML" to the element with the class "result". In this case, if you later click on another orange block, then the data in the "result" element will change to those contained in the newly selected block.
Sample code (HTML, CSS, JS).
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

https://jsfiddle.net/3j7sfgy5/