Here is a very simple and rude approach – I used Formik my project some time ago and I’m pretty sure it’s not perfect but this is exactly what you need.
So some details.
- do not render input for every item in your list, you need only render it’s value and element with delete handler
- you need only one controlled input and it’s value is used for
name
field in yourtodos
. State is cleaned when you clickAdd
button. - you need to render your element only if
formik.values.todos.lenght > 0
- you need to disable
Delete
button whenformik.values.todos.lenght === 1
Add
button should be disabled whennewValue.lenght === 0
Piece a cake, right?