clicking inner div to trigger outer div event

Question

I have a React functional component that returns a div containing child divs. It comprises an Item , and is used by another component to populate a list of Item rows. That list component gives each item an onClick event function, which I've placed on the outer div of each Item :

import React from 'react';

const Item = props => {
  const { itemid, data, onClick } = props;
  
  return (
    <div itemid={itemid} type="button" tabIndex={0} onKeyPress={onClick} role="button" onClick={onClick}>
      <div>
        {itemid}
      </div>
      <div>
        {data}
      </div>
    </div>
  )
}

export default Item;

My thought is each entire Item row (both inner divs), when clicked, should trigger the onClick event attached to the outer div. But nope - the inner divs above do not apparently inherit the onClick event from the outer div.

The onClick event is only triggered by the inner divs if I attach it to them directly.

Is there some way to have the inner divs inherit the onClick attached to the outer div?

Answer 1

As it turns out, this seems to solve my problem:

import React from 'react';

const Item = props => {
  const { itemid, data, onClick } = props;
  
  return (
    <div itemid={itemid} type="button" tabIndex={0} onKeyPress={onClick} role="button" onClick={onClick}>
      <div style={{ pointerEvents: 'none' }}>
        {itemid}
      </div>
      <div style={{ pointerEvents: 'none' }}>
        {data}
      </div>
    </div>
  )
}

export default Item;

I guess thepointerEvents: 'none' keeps the child divs from being clickable, so the outer div then takes the click.

Still hoping for a better solution, as this seems a little strange.

Answer 2

As suggested by @DucHong e.stopPropagation() will prevent the parent element clicks if you put it in the click event of the child element.

        import React, { useState } from "react";
        import './RowForm.css';
        import { BsFillCheckSquareFill } from "react-icons/bs"
        import { BookmarkTransaction, ChangeFormData, ClearTransaction } from "../../Accounts/Store/accountsSlice";

       ...
       ...
       ...

        <tr
            key={id}
            onClick={(e) => {
                dispatch(ChangeFormData({
                    isChecked: true,
                    formData: getValues()
                }))
            }}
        >
            <th className="checkbox-th">
                <FormGroup check className="mt-2">
                    {isChecked ?
                        <BsFillCheckSquareFill
                            onClick={(e) => {
                                e.stopPropagation()
                                dispatch(ChangeFormData({
                                    isChecked: false,
                                    formData: getValues()
                                }))
                            }}
                            className='check-icon'
                        />
                        :
                        <div
                            onClick={(e) => {
                                console.log("===>true bottom")
                                e.stopPropagation()
                                dispatch(ChangeFormData({
                                    isChecked: true,
                                    formData: getValues()
                                }))
                            }}
                            className='checkbox-wrapper'
                        />
                    }
                </FormGroup>
            </th>
       </tr>

       ...
       ...
       ...