Есть кнопка в таблице. На таблице навешано событие onClick, и на кнопку есть onClick с другой функцией. Не могу понять как грамотно их разделить

В компоненте если нажать на строку таблицы вызывается this.onClick, этот метод запускает action и перенаправляет пользователя на форму с настройками нажатого check. Также есть кнопка со своим событием, которое удаляет выбранный check.
Суть проблемы в том, что при нажатие на кнопку происходит редирект и я понимаю, что это из-за того, что кнопка находится в таблице и срабатывают два события. Но я не могу вынести кнопку за tr тк появляются Warnings.

Я хочу узнать возможно ли как-то сделать так что бы при нажатие на кнопку удаления не происходил редирект

Код:

renderChecks() {
    const {checks} = this.props;
    return checks.map(check => {
        const { protocol, URL, successCodes, method, timeout, state } = check;
        return (
            <tr
                key={check._id}
                onClick={this.onClick.bind(this, check._id)}
                style={{ cursor: "pointer" }}
            >
                <th>{protocol}</th>
                <th>{URL}</th>
                <th>{method}</th>
                <th>{JSON.stringify(successCodes)}</th>
                <th>{timeout}</th>
                <th>{state}</th>
                <th>
                    <button
                        className="close"
                        onClick={this.deleteOnClick.bind(this, check._id)}
                    >
                        &times;
                    </button>
                </th>
            </tr>
        );
    });
}
onClick = id => {
    this.props.checkEdit(id);
    this.context.router.history.push("/check_settings");
};
deleteOnClick = id => {
    this.props.deleteCheck(id);
};