React Inline Editing

in #react β€’ 6 years ago

React Inline Editing πŸ˜ŒπŸ˜¦πŸ˜–πŸ˜­πŸ˜ΆπŸ˜…πŸ˜

I have no idea if this was supposed to be as difficult as it was for me... but here we go!

Adding:
Screen Shot 2018-06-30 at 6.15.02 AM.png

Inline editing:
Screen Shot 2018-06-30 at 6.16.11 AM.png

How do we achieve this?

  1. Create a component that will manage the overall state of your modal (or whatever container you choose).
  2. Render 2 child components: (1) To hold the form, manage its state, and pass saved changes up to the parent. (2) To list each item.
  3. Your (2) child component will have its own child component that will render 1 of 2 things conditionally: Either the basic list item or the inline form. This child component has the same basic form state management as it's aunt/uncle...auncle (1), and sends changes up two levels until it gets to the modal where overall state is managed.

ReactInlineEditing.png

Questions? Concerns? Room for improvement?