Capitalize the first letter of a String in React

# Table of Contents

# Capitalize the first letter of a String in React

To capitalize the first letter of a string in React:

Use the charAt() method to get the first letter of the string.
Call the toUpperCase() method on the letter.
Use the slice() method to get the rest of the string.
Concatenate the results.

App.js

Copied!
// 👇️ If you need to capitalize first and lowercase the rest
const capitalizeFirstLowercaseRest = str => {
  return (
    str.charAt(0).toUpperCase() + str.slice(1).toLowerCase()
  );
};

export default function App() {
  // 👇️ If you only need to capitalize the first letter
  const capitalizeFirst = str => {
    return str.charAt(0).toUpperCase() + str.slice(1);
  };

  const str = 'bobby hadz';

  console.log(capitalizeFirst(str)); // 👉️ "Bobby hadz"
  return (
    <div>
      <h2>{capitalizeFirst(str)}</h2>
    </div>
  );
}

react-capitalize-first-letter

The code for this article is available on GitHub

We created 2 reusable functions - capitalizeFirstLowercaseRest and capitalizeFirst.

The capitalizeFirstLowercaseRest function converts the first letter of a string to uppercase and the rest to lowercase.

App.js

Copied!
const capitalizeFirstLowercaseRest = str => {
  return (
    str.charAt(0).toUpperCase() + str.slice(1).toLowerCase()
  );
};

The capitalizeFirst function simply converts the first letter of a string to uppercase.

App.js

Copied!
const capitalizeFirst = str => {
  return str.charAt(0).toUpperCase() + str.slice(1);
};

The only parameter we passed to the String.charAt method is the index of the first character in the string.

JavaScript indexes are zero-based, so the index of the first character in a string is 0, and the index of the last character is string.length - 1.

We used the String.toUpperCase() method to capitalize the first letter of the string.

App.js

Copied!
const capitalizeFirst = str => {
  return str.charAt(0).toUpperCase() + str.slice(1);
};

console.log(capitalizeFirst('bobby')); // 👉️ Bobby
console.log(capitalizeFirst('alice')); // 👉️ Alice
console.log(capitalizeFirst('carl')); // 👉️ Carl

We used the addition (+) operator to concatenate the first character with the rest of the string.

The only argument we passed to the String.slice() method is the start index - the index of the first character to be included in the new string.

Notice that we wrapped the call to the capitalizeFirst() function in curly braces in our JSX code.

App.js

Copied!
<h2>{capitalizeFirst(str)}</h2>

The curly braces mark the beginning of an expression that has to be evaluated.

If you only have to do this once in your code, you don't have to create a reusable function that capitalizes the first letter.

App.js

Copied!
export default function App() {
  const str = 'bobby hadz';

  const result = str.charAt(0).toUpperCase() + str.slice(1);

  console.log(result); // 👉️ "Bobby hadz"
  return (
    <div>
      <h2>{result}</h2>
    </div>
  );
}

The code for this article is available on GitHub

You could also do it directly in your JSX code.

App.js

Copied!
export default function App() {
  const str = 'bobby hadz';

  return (
    <div>
      <h2>{str.charAt(0).toUpperCase() + str.slice(1)}</h2>
    </div>
  );
}

I've also written a tutorial on how to use the substring() method in React.

# Capitalize the first letter of each word in a String in React

To capitalize the first letter of each word in a string in React:

Use the split() method to split the string into an array.
Use the map() method to iterate over the array.
Capitalize the first letter of each word.
Use the join() method to join the array into a string.
Render the result in your component.

App.js

Copied!
function toTitleCase(str) {
  const titleCase = str
    .toLowerCase()
    .split(' ')
    .map(word => {
      return word.charAt(0).toUpperCase() + word.slice(1);
    })
    .join(' ');

  return titleCase;
}

export default function App() {
  const str = 'bobby hadz com';

  return (
    <div>
      <h2>{toTitleCase(str)}</h2>
    </div>
  );
}

react capitalize first letter of each word

The code for this article is available on GitHub

The toTitleCase() function takes a string and capitalizes the first letter of each word in the string.

App.js

Copied!
function toTitleCase(str) {
  const titleCase = str
    .toLowerCase()
    .split(' ')
    .map(word => {
      return word.charAt(0).toUpperCase() + word.slice(1);
    })
    .join(' ');

  return titleCase;
}

// 👇️ Bobby Hadz Com
console.log(toTitleCase('bobby hadz com'));

// 👇️ Bobby Hadz
console.log(toTitleCase('bobby hadz'));

// 👇️ Bobby Hadz Com
console.log(toTitleCase('BOBBY HADZ COM'));

We first used the toLowerCase() method to convert the string to lowercase.

This is necessary because only the first letter of each word should be capitalized in the output.

App.js

Copied!
const str = 'BOBBY HADZ';

console.log(str.toLowerCase()); // 👉️ bobby hadz

The next step is to split the string by each space.

App.js

Copied!
const str = 'BOBBY HADZ COM';

// 👇️ [ 'bobby', 'hadz', 'com' ]
console.log(str.toLowerCase().split(' '));

The String.split() method takes a separator and splits the string into an array on each occurrence of the provided delimiter.

The String.split() method takes the following 2 parameters:

Name	Description
separator	The pattern describing where each split should occur.
limit	An integer used to specify a limit on the number of substrings to be included in the array.

At this point, we have an array of lowercase words.

We used the Array.map() method to iterate over the array and capitalize the first letter of each word.

App.js

Copied!
// 👇️ [ 'Bobby', 'Hadz', 'Com' ]
console.log(
  str
    .toLowerCase()
    .split(' ')
    .map(word => {
      return word.charAt(0).toUpperCase() + word.slice(1);
    }),
);

The function we passed to the Array.map() method gets called with each element in the array.

The map() method returns a new array containing the values returned from the callback function.

The last step is to use the Array.join() method to join the array into a string with a space separator.

App.js

Copied!
// 👇️ Bobby Hadz Com
console.log(
  str
    .toLowerCase()
    .split(' ')
    .map(word => {
      return word.charAt(0).toUpperCase() + word.slice(1);
    })
    .join(' '),
);

The code for this article is available on GitHub

The Array.join() method concatenates all of the elements in an array using a separator.

The only argument the Array.join() method takes is a separator - the string used to separate the elements of the array.

If you get the error that map() is not a function in React, click on the link and follow the instructions.

When you use the function in your JSX code, make sure to wrap the call to the function in curly braces.

App.js

Copied!
function toTitleCase(str) {
  const titleCase = str
    .toLowerCase()
    .split(' ')
    .map(word => {
      return word.charAt(0).toUpperCase() + word.slice(1);
    })
    .join(' ');

  return titleCase;
}

export default function App() {
  const str = 'bobby hadz com';

  // 👇️ "Bobby Hadz Com"
  console.log(toTitleCase(str));

  return (
    <div>
      <h2>{toTitleCase(str)}</h2>
    </div>
  );
}

wrap call to function in curly braces

The code for this article is available on GitHub

I've also written an article on how to change the favicon in React.js.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Capitalize the first letter of a String in React

# Table of Contents

# Capitalize the first letter of a String in React

# Capitalize the first letter of each word in a String in React

Borislav Hadzhiev