Nested FileDrop triggering onDrop event multiple time. One for child component and one for parent component. please guide how to resolve this issue.

[Muhammad Ali]

        <FileDrop
          onDrop={(files, event) => console.log('DropEd on Main Folder!', files, event)}
        >
          {files.map((f, i) => (
            <Row key={i}  >
              <Col span={12}  >
                {f.isDir ?
                  <span style={stylesDir}>
                    <FileDrop onDrop={(files, event) => console.log(`DropEd on child Folder ${f.name}`, files, event)}>
                      {f.name}
                    </FileDrop>
                  </span>
                  : f.name}
              </Col>
              <Col span={12}  >
                {f.size}
              </Col>
            </Row>
          ))}
        </FileDrop>

[Kabir Sarin]

This is just how events work, they will always bubble upwards in the tree. You can call something like event.stopPropagation() and/or event.preventDefault() to prevent this.