Edit list item (nested component) with single modal

What would be a good approach to have a single modal to update data in nested (child) components?

For example, I have a parent component that is a list (<ul>) with child components (<li>). If I don’t want a modal for every <li> to change the data but a single one in the <ul> component.

How can I achieve parent / child communication, e.g. child -> parent = open modal with given data, parent -> child = save / display update data?

Hope its is somewhat clear :wink: Thanks.