beDenz

const ChildComponent = (props) => (
  <div
    className={`childComponent ${props.isActive ? 'active' : ''}`}
    onClick={props.onClick}
    data-id={props.id}
  >
    <h3>{props.text}</h3>
  </div>
);


const ParentComponent = ({ items }) => {
  const [ active, setActive ] = React.useState(null);

  const onClick = e => setActive(+e.currentTarget.dataset.id);
  // или
  // const onClick = e => setActive(+e.target.closest('[data-id]').dataset.id);

  return (
    <div>
      {items.map(n =>
        <ChildComponent
          key={n.id}
          onClick={onClick}
          isActive={n.id === active}
          {...n}
        />
      )}
    </div>
  )
};


ReactDOM.render(
  <ParentComponent
    items={[
      { id:  69, text:  'hello, world!!' },
      { id: 187, text:  'fuck the world' },
      { id: 666, text: 'fuck everything' },
    ]}
  />,
  document.getElementById('root')
);

var out = document.getElementById('root');
var arr = [];
for(i=4;i<=400;i++){
    arr.push([i]);
}
 out.innerHTML = out.innerHTML + arr + " ";