Реагировать на предотвращение всплесков событий во вложенных компонентах при нажатии

Вот основной компонент. Оба<ul> а также<li> есть функции onClick. Я хочу только onClick на<li> стрелять, а не<ul>, Как мне этого добиться?

Я играл с e.preventDefault (), e.stopPropagation (), но безрезультатно.

class List extends React.Component {
  constructor(props) {
    super(props);
  }

  handleClick() {
    // do something
  }

  render() {

    return (
      <ul 
        onClick={(e) => {
          console.log('parent');
          this.handleClick();
        }}
      >
        <li 
          onClick={(e) => {
            console.log('child');
            // prevent default? prevent propagation?
            this.handleClick();
          }}
        >
        </li>       
      </ul>
    )
  }
}

// => parent
// => child

Ответы на вопрос(4)

Ваш ответ на вопрос