Code With Me - Add Board Modal - Kanban Task Tracker

Показать описание

Code With Me! In this session, we add the ability to create a new board in our Kanban task tracker. Here is what we accomplish:

- Set up our 'add board' modal so it renders when we click a "Create new board" button
- Add our utility class of "modal" so that it appears in the appropriate position (fixed, and centered)
- Enable dismissing the modal by clicking on a background, and clicking the 'cancel' button
- Set State on the input 'title' as a string to track changes
- Set State on the 'columns' section so we can push new objects onto an array and map through the results to render each, as well as track changes to the value of each
- Create a 'remove' button for each column so we can splice the appropriate entry from the array
- Send a board object up to the parent component, which utilizes Immer in a separate file to update the deeply nested state object, then re-render the results

We hit some bugs along the way so lots of fun!

I'm not sure who this is for really, since it clocks in at 1.5 hours! Hopefully some of you out there find some value in seeing my process. I know it certainly helps me to think out loud about my problem solving and to practice my vocabulary.