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 tomap
over each character. -
map(s ...)
- Here, we're usings
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 the0
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 forsubstring
) 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)
orJo
. 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.
Top comments (0)