[React] How to manipulate input values before storing to state. 
Tags: react, forms, javascript, tutorial
Published: 2019-06-20 00:01:11

---
title: [React] How to manipulate input values before storing to state. 
published: true
description: 
tags: #react #forms #javascript #tutorial
---

While working on a project, I decided it was important to do some manipulating of input values before storing it to state. Namely, capitalizing the first letter of each word the user types into that field. 

I wasn't sure how to do this in JavaScript, and I wasn't 100% sure how to implement that capitalization behavior into my React component before it was stored to state (this might seem obvious to most, but I've spent a few weeks away from this project). 

After all was said and done, I realized there wasn't a lot out there on this that I'd seen, so I'm sharing it here with you all. 

## Where Do We Do It?

If we look at our components, we probably have one for each form, or even each field. Inside there, we have what are called `handlers`. These little buddies take our inputs and do something with them. Chances are, storing it to our state. 

This handler might look something like this:
```
  handleInput(event, key) {
    this.setState({
      [key]: event.target.value
    });
  }
```

What this does, is stores the `value` of the input field (so, whatever the user types or selects) and plunks it into this component's state object, at the `key` that is passed from our `onChange` event. 

Our input with `onChange` might look like this (usually more going on here, but let's keep it simple for this):
```
    <input
      required
      type="text"
      onChange={event => this.handleInput(event, 'firstName')}
    />
```

Our `onChange` is saying to run the `handleInput` handler, passing the `event` values and the `firstName` key. 

Our state, then, might look like this:
```
this.state = {
  firstName: '',
  lastName: '',
  age: ''
}
```

If what we pass in our `onChange` doesn't match a key in our state object, this will not work. 

All that said – still, where do we do it? 

Our `handler` is the perfect place to do this. We're going to pass the data on from our input's `onChange`, up to our `handleInput`. Before we `setState`, we'll perform our logic.


## How do we do it?

I wasn't entirely sure how to do this myself, so I had to do some hunting. I knew we'd have to `split` and `join` and `toUpperCase` some things, but wasn't entirely sure beyond that. 

Turns out, it's quite easy. 

First of all, let's understand *what* we are doing it to. Simply put, we need to manipulate our `event.target.value`, which is whatever the user inputs into that field.

Here are all the things we need to perform on our `event.target.value` input to capitalize the first letter of each word:
```
      .toLowerCase()
      .split(' ')
      .map(s => s.charAt(0).toUpperCase() + s.substr(1))
      .join(' ');
```

- `toLowerCase()` is first making every character lower case. 
- `split(' ')` takes each character in our original string (`event.target.value`) and splits them into an array equal to each character in that string. So if our user provided John, we would get `[j,o,h,n]`. This allows us to `map` over each character.
- `map(s ...)` - Here, we're using `s` to represent each iteration, so each character, which is a single-character string.
- `map(s => s.charAt(0) ...)` - if our iteration is the character at the `0` place in our array...
- `map(s => s.charAt(0).toUpperCase()` then capitalize it...
- `map(s => s.charAt(0).topupperCase() + s.substr(1))` - this one is tougher to explain. `substr` (short for `substring`) returns the part of the string at the index value you define, and anything after it. In this case, everything but the first index value. Alternatively, we could use it to return maybe just the first two indexes `(0, 1)` or `Jo`. We use the `+` to combine (concatenate) all of the array items together.

So here's what our code should look like:
```
    let capsText = event.target.value
      .toLowerCase()
      .split(' ')
      .map(s => s.charAt(0).toUpperCase() + s.substr(1))
      .join(' ');
```

Now, if we `console.log(capsText)`, you'll see we get exactly what we want. How do we store that in state? 

Simple! 
```
    this.setState({
      [key]: capsText
    });
```

Let's put it all together!

```
  handleInput(event, key) {
    let capsText = event.target.value
      .toLowerCase()
      .split(' ')
      .map(s => s.charAt(0).toUpperCase() + s.substr(1))
      .join(' ');

    this.setState({
      [key]: capsText
    });
  }
```

That's it! Not so bad, eh?

Thanks for reading.