This article will show you solutions for using the substring() method in React. Here are some ways to do it, with examples to make it easier for you to understand.
Using the substring() method in React
The string. substring() method will extract the content of a string. The extracted content will be determined by two parameters, start, and end. The method will return the content extracted from the original string.
Syntax:
string.substring(start, end)
Parameters:
- start is the starting position to extract.
- end is the end position. Extraction will not include the end element.
Add full parameters method
This way, we will pass all the necessary parameters of the method, which are start and end, and the program will know where the string we need to get from is, as in the example below.
Code:
import React, { useState } from "react";
export default function App() {
var string = "LearnShareIT";
const [subString, setSubString] = useState(string);
return (
<div className="App">
<h2>Using the substring() method in React | LearnShareIT</h2>
<h3>{subString}</h3>
<button
onClick={() => {
setSubString(string.substring(5, 10));
}}
>
Substring
</button>
</div>
);
}
Output:

Here, from the original string “LearnShareIT”, we use the substring() method and pass it on to two parameters, 5 and 10. The method will receive 5 as the starting value of the cut and 10 as the end value. So we can get the string “Share” from the original string “LearnShareIT”. Even if we change the code to:
string.substring(10, 5)
Javascript will still notice that the start value is greater than the end value, so that it will reverse and still give the same result.
Only add the start parameter
So what if you pass in a single parameter? The program will default to select it as the start parameter and how to return the results. See the example below to understand more.
Code:
import React, { useState } from "react";
export default function App() {
var string = "Leonardo DiCaprio";
const [subString, setSubString] = useState(string);
return (
<div className="App">
<h2>Using the substring() method in React | LearnShareIT</h2>
<h3>{subString}</h3>
<button
onClick={() => {
setSubString(string.substring(8));
}}
>
Substring
</button>
</div>
);
}
Output:

So as you can see in the above example, when we only pass the start parameter, the default end parameter is setting to the last index value of the string. For example, the string “Leonardo DiCaprio” becomes the string “DiCaprio”. Hope you have success with the above methods.
Summary
To summarize, through this article, you have learned some ways for using the substring() method in React, such as adding full parameters method or only adding the start parameter. Have a good day.
Maybe you are interested:
- How to downgrade React version 16 to 15
- Using the map() method with index in React
- Use map() on an Array in Reverse Order in React

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