Антон Спирин

Что пофиксить, подскажите плиз.

.points {
  position: relative;
  height: 400px;
  border: 1px solid silver;
  overflow: hidden;
}

.point {
  display: inline-block;
  position: absolute;
  width: 20px;
  height: 20px;
  background: red;
}

class App extends React.Component {
  state = {
    points: [],
  }

  addPoint = ({ nativeEvent: { offsetX, offsetY } }) => {
    this.setState(({ points }) => ({
      points: [ ...points, {
        x: offsetX - 10,
        y: offsetY - 10,
      } ],
    }));
  }

  render() {
    return (
      <div className="points" onClick={this.addPoint}>
        {this.state.points.map(n => (
          <div className="point" style={{
            left: `${n.x}px`,
            top: `${n.y}px`,
          }}
          ></div>
        ))}
      </div>
    );
  }
}

useEffect(() => {
  const onKeypress = e => console.log(e);

  document.addEventListener('keypress', onKeypress);

  return () => {
    document.removeEventListener('keypress', onKeypress);
  };
}, []);

const m = [[]]
m[0][0] = 'информация'

const Comments = ({ items }) =>
  Array.isArray(items) && items.length
    ? <React.Fragment>{items.map(n =>
        <div className="comment" key={n.id}>
          <h3>{n.name}</h3>
          <div>{n.body}</div>
          <Comments items={n.reply} />
        </div>)}
      </React.Fragment>
    : null;