How To Capitalize The First Letter Of A String In React

To capitalize the first letter of a string in React you can use charAt(0) method. We will give you the specific steps in this article. Read on it.

Capitalize the first letter of a string in React

Use charAt(0) method

The character from the given index is returned by the function charAt().

From left to right, characters in a string are indexed. In a string called string name, the first character has an index of 0, and the last character has an index of string name: length – 1.

Syntax:

string.charAt(index);

Parameter:

• Index: An integer between 0 and a number less than the length of the string.

And we use the toUpperCase() method to convert all the characters in a string to uppercase. In the code below, we will apply the two methods above to capitalize the first letter of a string. Let’s see in the following code:

Code:

import React, { useState } from "react";
 
const App = () => {
  const [string, setString] = useState("");
  const handleChange = (e) => {
    setString(e.target.value);
  };
  const handleClick = () => {
    var stringCapital = string.charAt(0).toUpperCase() + string.slice(1);
    setString(stringCapital);
  };
 
  return (
    <div>
      <h2>LearnShareIT</h2>
      <h3>Enter a string:</h3>
      <input
        type="text"
        name="string"
        value={string}
        onChange={handleChange}
      ></input>
      <button onClick={handleClick}>Capitalize the first letter</button>
    </div>
  );
};
 
export default App;

Output:

So we will get the first value of the string in the input we have just entered using the charAt(0) method with that text and then capitalize it using the toUpperCase() method. As you can see in the input when we select the button, the program will capitalize the string in the input, so we’ve done the job. Or you can see more methods with CSS below that can give you the same result.

Use the CSS pseudo-class method

“:first-letter” selects the first character of an element.

Syntax:

tag:first-letter {    property: value;}

Parameter: None

In this way, we will use the CSS pseudo-class first letter to point to the first character of the string and use the text-transform: capitalize property to be able to capitalize the character being pointed at.

Code:

<Title className="title-capital">learnshareit</Title>
// CSS
.title-capital::first-letter {
  text-transform: capitalize;
}

Output:

Learnshareit

With this approach, we use pure CSS so that it can be compatible with all UI frameworks. I hope these methods will help your problem.

Summary

To summarize, there are many ways to capitalize the first letter of a string in React. After reading this article, we know some easy ways, such as using the charAt(0) method or using the CSS pseudo class method in Javascript. Let’s try these methods.

Maybe you are interested:

• Concatenate strings and variables in react
• Reset a File input in React
• Type useState as Array of Strings in React TypeScript

Nathaniel Kirk

Hi, my name’s Nathaniel Kirk. I’m interested in learning and sharing knowledge about programming languages. My strengths are C, C++, Python, HTML, CSS, Javascript, and Reactjs. If you have difficulty with them, don’t worry. I’m here to support you.

---

Name of the university: PTIT
Major: IT
Programming Languages: C, C++, Python, HTML, CSS, Javascript, Reactjs