Using form-serialize in React.js forms

While learning react you’re introduced to “controlled” and “uncontrolled components” https://facebook.github.io/react/docs/forms.html for building forms. I prefer using form-serialize in React.js forms and uncontrolled components. Here’s why.

The Problem

After building a few trivial apps using controlled inputs I found the amount of boilerplate required quite high. When I later moved to a flux architecture, replacing each setState call with dispatch, I was convinced I was missing something. Sending each keystroke through the dispatcher, updating the store and then redrawing the app didn’t feel right.

I didn’t suffer any performance problem, as my apps were small, but all that work for each keypress seems like a problem waiting to happen. I searched for an alternative.

Current Solution

The simplest solution I’ve found is to use the form-serialize npm package.

When the form is submitted, you get a nice object to work with.

onFormSubmit: function (event) {
    let formData = serializeForm(event.target, { hash: true });
    // formData = { foo: 'bar' } 
}

render: function () {
    return (
        <form onSubmit={this.handleSubmit}>
            <input type="text" name="foo" defaultValue="bar"/>
            <input type="submit" value="do it!"/>
        </form>
    );
}

I especially like this solution, as it’s easy to add to an existing form without having to hook up a lot of extra functions.

NB. form-serialize works with the name field of the inputs, not the id, so make sure that is set appropriately.

Conclusion

My position may change, but I currently think the overhead of adding handleChange and value handlers to every form component’s props is overkill.

Serializing the form data at submission time seems to be a nice centralised place and appears to work well. I’m able to do all the stuff I need with forms without the need for a lot of extra boilerplate.

If you think I’m missing something, I’d really appreciate you leaving a comment below. Have I shot myself in the foot?

Income Report – June 2016

I’m making my income report details public so anyone thinking of starting something similar can see real world numbers.

In finance speak, the site hasn’t started “trading” yet. So there is no income to report, but unfortunately there has been some expenses.

Monthly Income

Total Income £0

Monthly Expenses

Description Value
Register Company at Companies House £13.19
Site Hosting £1.25 (£14.99 a year)

Total Expenses £14.44

Month Profit

Total Profit £0 – £14.44 = £-14.44

Analysis

As expected, not exciting, but as far as setup costs go, I imagine it’s quite good!

Lessons learned this month

Quite a few things were new to me this month. I’m taking the following lessons from this month:

  1. It’s easy to register a company
  2. Setting up a business bank account takes a lot longer than expected > 2 weeks!
    a. It’s needed as you can’t do affiliate links without it
  3. Deploying to a sub-domain is trivial
    a. But DNS propagation isn’t instant, so don’t expect the URL to work instantly
  4. WordPress child-themes are easy to setup and use

Progress this month

I’m counting the following things as achievements this month:

  • I’ve registered a company at Companies House
  • I’ve setup this site
  • I’ve created and deployed a simple app at http://meetingcost.myappincome.co.uk
  • I’ve learned about WordPress child themes

Target for the next month

Next month will be the first month this site is active. I’m setting myself the following targets:

  1. Marketing
    a. “Launch” the site on other passive income blogs that list other blogs
    b. Use twitter to advertise the sites and interact with others
  2. Get 5 twitter followers – http://twitter.com/myappincome
  3. Publish 1 blog post a week
  4. Publish a tutorial series of posts about a simple React app/Redux tutorial
  5. Start developing a second app
  6. Complete the Getting Started Tasks
  7. Finish the “getting started tasks”, e.g. affiliate links
  8. Start work on the next app
  9. Update Meeting Cost twice

Month’s Useful Links – June 2016

As much as I’m trying to earn a second income from MyAppIncome, it’s also a way for me to learn new things. I’m sharing the month’s useful links. I’ll be using this for reference, hopefully it’s useful to someone else too

Monthly Reading – June 2016

In no particular order, this month I found the following useful/interesting

How to style forms with Bootstrap
The best explanation I could find about the options you have for styling forms with bootstrap was https://formden.com/bootstrap-form-guide/. Very clear, succinct and provided great examples.

Form-serialize
I’m going to publish a blog post on forms with React at some point. Something about controlled components and the boilerplate required didn’t sit well with me. For now, I’m using https://www.npmjs.com/package/form-serialize to obtain a simple object of the values entered.

Pete Hunt How To Learn React
I got bogged down with analysis paralysis while trying to decide how to style my React app “correctly”. I read way to much about using normal CSS, inline-css and eventually css-modules going down a nice side trip into material-ui vs elemental ui vs react-toolbox vs react-bootstrap.

Thankfully I remembered Pete Hunt’s great guide on what to learn. Keep it simple until you start having problems. Recommended reading https://github.com/petehunt/react-howto.

React snippets in VSCode
I use Visual Studio Code for my development, saw a tweet about creating snippets and found https://github.com/xabikos/vscode-react. Lots less typing now!

WordPress sitemap.xml 404
I was having a bit of trouble trying to generate a sitemap.xml. I was getting a 404. Re-submitting my permalinks settings, like https://kb.yoast.com/kb/my-sitemap-index-is-giving-a-404-error-what-should-i-do/ recommended seemed to do the trick.

Reactjs-training PinToBottom
It is always good to test your skills. So when Reactjs-training provide the opportunity for free, I leapt at it. The first problem http://codepen.io/ReactJSTraining/pen/MeePdW?editors=0010 was about adding a PinToBottom component. I managed to get it partially working, as I couldn’t get an elegant way to cope with the user scrolling back up. The solution http://codepen.io/ReactJSTraining/pen/QEEzbG/?editors=0010 showed me how. I highly recommended these two, especially the videos.

React Lifecycle Events
The first search result was really good https://busypeoples.github.io/post/react-component-lifecycle/. I’ve not used the majority of these so far but wanted to read up on them first.