Why does onClick propagate to child element?

Question

React

Hello! Something strange...

<li className="mdc-list-item" tabIndex="0" key={i} data-user-id={user.id} onClick={this.startChat}>
     <span className="mdc-list-item__text">{user.name} {user.surname}</span>
</li>

startChat(event) {
     console.log(event.target.getAttribute('data-user-id'))
}

this.startChat = this.startChat.bind(this);



When I click on the edges, respectively, this is lian element, I get the expected. But when I click on the center, where it lives span, I get null .

Answer 1

Because the event pops up