I'm trying to build a tool that takes in any React element, renders it on the screen, and allows you to edit any string-type props that end up rendered on the screen by just clicking on them (WYSIWYG style).

To do this, I want to render the component with some default values for each string prop and when the user clicks on the DOM, if they clicked on an element that is mapped to a prop value then we replace the DOM element with a contentEditable equivalent and update the props for the rendered component based on the user's input.

For example with the following component

const HelloWorld = props => (
    Hello, <div>{props.name}</div>
)

I'd like to render the HelloWorld component with a default value for name such as Bob. When the user clicks on Bob on their screen, the tool would replace the div with content editable and update the prop value for name based on the user's input.

My question is, how can I find the child most DOM element that eventually rendered a given prop?

In the example above, props.name would be mapped to the <div> element.