<!-- element -->
<div id="comp04" class="sec"></div>

<!-- component -->
<script src="componets/Comp04.js" type="text/babel"></script>

<!-- react -->
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
  
<!-- поддержка text/babel -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

#comp04 div .item {
  display: block;
  background: #ccc;
  padding: 1rem;
  margin-bottom: 1rem;
}

#comp04 div .selected {
  background: #FF0000;
}

'use strict';

function test04() {
  
  let arr = [];
  for (let i = 1; i < 4; i++) {
    arr.push(
      <li key={[i]} className="item" onClick={newColor}>{[i]}</li>
    );
  }
  
  function newColor(e) {
    const element = e.target;

    if (element.classList.contains('selected')) {
      e.target.classList.remove('selected');
    } else {
      e.target.classList.add('selected');
    }
  }

  return <div>{arr}</div>
}

const rootNode = document.getElementById('comp04');
const root = ReactDOM.createRoot(rootNode);
root.render(React.createElement(test04));