ilonacodes
Patreon
Investor Profile
Contact

Financial tips and advice on investment for developers:
"Learn how to free extra monthly cash from your dev-salary for investment"

There are so many different ways to free money for investments without thinking of getting another job. Download my Top-15 cash-freeing tips cheat sheet.

Get my 15 Tips to Invest More Cash Monthly!
15
Sep
2018
#app
#React
#JavaScript
#Formik
#web

Why Formik With React

15 Sep, 2018

source: https://bit.ly/2paojyl

The way, how I try to understand the purpose of any framework is to use it and compare with the already implemented no-framework solution.

Sure, most of us, at first hear about a new library from tech media portals or from tech-dev influencers or from conferences/meetups or from coworkers, etc. then we are going to check out the source of it whether it is a software or open-source product. In the end, we are playing with it and trying to apply it to the existing product.

I am also following these steps, but during the “playing” phase I prefer to the traditional implementation, that I already know how it should work, and afterward, I rewrite the existing solution using a new framework that I want to learn deeply.

The Formik with React was not an exception of this rule.

As an example, I started with implementing the customer form only with React (I am going to skip the snippet and App.js where I have imported the <CustomerFormFormik /> and <CustomerFormReact /> to render them in DOM, because it’s not relevant to this post), and explain one of the reasons “that’s why Formik”.

Of course, you can check out the Formik documentation and find out all its advantages. In short, which I understand are there:

  • Redux free
  • or with naming conventions from redux-form
  • HOC pattern (using connect() from Redux to pass state and dispatch actions to reducer)
  • render props approach with React
  • special validation Schema with Yup
  • … and so on…

So, it’s the time to have a look at the simple customer form with React. We’ll start simple — with one input field:

// CustomerFormReact.js

import React from 'react';

export class CustomerFormReact extends React.Component {
    constructor() {
        super();

        this.state = {
            firstName: '',
        };

        this.onChangeInputFirstName = this.onChangeInputFirstName.bind(this);
        this.onSubmitForm = this.onSubmitForm.bind(this);
    }

    onChangeInputFirstName(e) {
        this.setState({
            firstName: e.target.value
        })
    }

    onSubmitForm(e) {
        e.preventDefault();
        this.props.createCustomer(this.state);
    }

    render() {
        return (
            <form onSubmit={this.onSubmitForm}>
                <input type="text"
                       name="firstName"
                       onChange={this.onChangeInputFirstName}
                />

                <button type="submit">Submit</button>
            </form>
        );
    }
}

As you noticed, for a single input element the boiler-plate is not that big. But what happens, if we add two extra input fields for this form?

// CustomerFormReact.js

import React from 'react';

export class CustomerFormReact extends React.Component {
    constructor() {
        super();

        this.state = {
            firstName: '',
            lastName: '',
            email: ''
        };

        this.onChangeInputFirstName = this.onChangeInputFirstName.bind(this);
        this.onChangeInputLastName = this.onChangeInputLastName.bind(this);
        this.onChangeInputEmail = this.onChangeInputEmail.bind(this);
        this.onSubmitForm = this.onSubmitForm.bind(this);
    }

    onChangeInputFirstName(e) {
        this.setState({
            firstName: e.target.value
        })
    }

    onChangeInputLastName(e) {
        this.setState({
            lastName: e.target.value
        })
    }

    onChangeInputEmail(e) {
        this.setState({
            email: e.target.value
        })
    }

    onSubmitForm(e) {
        e.preventDefault();
        this.props.createCustomer(this.state);
    }

    render() {
        return (
            <form onSubmit={this.onSubmitForm}>
                <input type="text"
                       name="firstName"
                       onChange={this.onChangeInputFirstName}
                />

                <input type="text"
                       name="lastName"
                       onChange={this.onChangeInputLastName}
                />

                <input type="email"
                       name="email"
                       onChange={this.onChangeInputEmail}
                />

                <button type="submit">Submit</button>
            </form>
        );
    }
}

And you are right, it looks messy. There are lots of duplication and also a lot of ways to solve it. The question is, which one is more suitable for the project, whether it’s only the form or not, or includes more different inputs, etc. So, one of them is using Formik:

// CustomerFormFormik.js

import React from 'react';
import {Field, Formik} from 'formik';
// accept props from the parent component
export const CustomerFormFormik = (props) => {
    // initial state (starting field values)
    const initialValues = {
        firstName: '',
        lastName: '',
        email: ''
    };

    return (
        // pass initial field values and actions to Formik-component
        <Formik
            intialValues={initialValues}
            onSubmit={(values, actions) => {
                // applying HOC-pattern
                props.createCustomer(values);
                actions.setSubmitting(false);
                actions.resetForm(initialValues);
            }}
            render={(props) => (
                <form onSubmit={props.handleSubmit}>
// add as much as needed input fields & by name binding them to the state
                    <Field type="text" name="firstName" />
                    <Field type="text" name="lastName" />
                    <Field type="email" name="email"/>
                    <button type="submit">Submit</button>
                </form>
            )}
        />
    );
};

Tadaaam! It works and looks more structured and elegant!

Perhaps, my dear reader, you can already dive in more advanced stuff with Formik, but to understand its fundamental concepts and then step by step to go deeper into it is also worth the time and effort.

I hope you find this post useful and would like to try Formik with React. Thank you for reading! 👏

If you have better methods on how to learn different frameworks in the encouraging and “unpainful” way, don’t hesitate to contact me per email, on Twitter or Instagram.

Cheers!

(This article was original published on my medium)

Tags | #app #React #JavaScript #Formik #web
Next: Emotional Todo List with React

My name is Ilona, and I'm a software engineer, founder, and blogger who is (besides programming) also passionate about startups, finance and investment

"I like to work hard for things that are worth it."
The latest articles:
Numbrs Review - App For Personal Finances (Germany & UK only)
How Developers Can Get Symbols From Stock Indexes With Python
Bitcoin Profit Calculator For Developers

Imprint
Privacy Policy
© 2021 ilonacodes
© 2021 ilonacodes
Imprint
Privacy Policy