How to populate modal form with a component's state with Reactjs?

Question

I have many child React components that are rendered from a parent Component and upon clicking the name of each one, I'd like to be able to edit the state of the particular component that was clicked, however I am not sure how to best "pass" the current state into the modal so that they can be edited in the form on the modal.

I have seen implementations where the modal fields are set with jquery (.val()) after the click, which does not seem like the idiomatic react way to do this.

How should I prepopulate the modal fields from the particular component and where should the modal be rendered exactly?

Answer 1

Depending on the modal you use, you should simply populate those values using props into a modal component. You can create a more generic modal component and feed this modal your props, or a specific modal if you don't think you could create a generic one that fits more use cases than this specific one. It's hard to give examples of code without seeing/knowing which one you use, but below link of react-bootstrap's implementation of the modal might help you!

React-bootstrap's implementation of the Bootstrap modal.