Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Components as data

Components as data

Ever had to manage form state without a dependency? In this brief talk, we'll learn to handle dynamically generated form components, with the goal of thinking about our React components as Data. This gives us the ability to create even more dynamic and powerful react applications.
The power of components lies in its use. Thinking about React components as Data enables us to build and manage, highly dynamic react applications seamlessly. By the end of this talk, we should understand and appreciate components as data by walking through a dynamically generated form.

21e0bdf9c7829dc2422de9086a82ced6?s=128

Orjiewuru Kingdom Isaac

February 06, 2018
Tweet

Transcript

  1. Components as data

  2. HELLO! I’m Orjiewuru Kingdom Software developer - Andela / CommonBond

    You can find me at @kingisaac95 2
  3. Components As Data “The core premise for React is that

    UIs are simply a projection of data into a different form of data.” - Sebastian Markbåge This talk is not about react theoretical concepts, rather I want to share what I learnt while researching on how to make forms dynamic in React 3
  4. Components As Data When the form needs to by dynamic,

    it sometimes posses issues with regards to managing their state and validation. How can thinking of these atomic components as data help? 4
  5. To be considered: ▹ Simple data model for a group

    of form inputs ▹ Managing the states of the inputs ▹ Validating the inputs 5
  6. Data model One way is to use an array of

    objects. With an array, we can easily add, remove and update the details of our form inputs. The array will contain objects representing the form groups. 6
  7. 7 this.state = { education: [ { name: '', start:

    '', end: '' }, ] } School name Start year End year Add more
  8. Managing state Use array methods concat() and filter() to add

    and remove items(form input groups) dynamically. 8
  9. Adding items Items are added via concat(). The new array

    is the representation of our form inputs. 9
  10. Adding items handleAdd = () => { this.setState({ education: this.state.education

    .concat([{ name: '', start: '', end: '' }]) }); } 10
  11. Handling changes Update the individual items in the objects using

    their index 11
  12. Handling changes handleChange = (event, index) => { const updatedEducation

    = this.state.education.map((education, educationIndex) => { if (index !== educationIndex) return education; return { ...education, [event.target.name]: event.target.value } }); this.setState({ education: updatedEducation }); } 12
  13. Removing items 13 Items are removed via filter(). The returned

    array is a representation of our current form state.
  14. Removing items handleRemove = (index) => { this.state.education.length > 1

    && this.setState((currentState) => ({ education: currentState.education.filter((education, educationIndex) => index !== educationIndex) })); } 14
  15. Validation We can add custom validation for these dynamic form

    inputs. Validation can be found in Github gist 15
  16. Links JSFiddle - bit.ly/dynamicformdemo Github gist - bit.ly/dynamicformgist Inspired by

    @goshakkk’s article - bit.ly/2FTmuvX 16
  17. 17 Thank You!