How to trigger react function in foreignObject inside d3 svg?

I have a react app which renders d3 svg with different components. Here is simple example. One type of component is input field with button. When click on button I want to update state in react app. How can I do it?


There are a variety of ways to structure a react application to update state. Here’s an example using classes, or alternatively you could look at using hooks.

Here’s a really nice interactive tutorial that describes the difference between using classes and hooks.