Navigate back to the homepage

how to concat string in react js?

Infinitbility
React
July 3rd, 2022 · 1 min read
how to concat string in react js?

Hi Friends 👋,

Welcome To Infinitbility! ❤️

To concat string in react js, you can use + plus operator or ES6 string interpolation both will help for your string concatenation.

In the following example, we will take the sample string variable, and do concatenation using both ways ( plus operator and string interpolation ).

1let text = "infinitbility.com";
2
3// using plus operator
4let str1 = "One of the best site is " + text;
5console.log(str1) // "One of the best site is infinitbility.com"
6
7// string interpolation
8let str2 = `One of the best site is ${text}`;
9console.log(str2) // "One of the best site is infinitbility.com"

Today, I’m going to show you How do i concat string in react js, as mentioned above here, I’m going to use the plus operator and string interpolation to concatenate two strings.

Let’s start today’s tutorial how do you concat string and variable in react js?

In this example, we will do

  1. take an example of a string state
  2. use the plus operator and string interpolation
  3. print the concatenation string on the page screen
1import React, { useState, useEffect } from "react";
2export default function App() {
3 const [sampleString, setSampleString] = useState("infinitbility");
4
5 useEffect(() => {
6 // using plus operator
7 let str1 = "One of the best site is " + sampleString;
8 console.log(str1)
9 }, []);
10
11 return (
12 <div className="App">
13 <h1>{`One of the best site is ${sampleString}`}</h1>
14 </div>
15 );
16}

In the above react js example, we have taken examples of both ways ( plus operator and string interpolation ) and printed output in the console and page screen.

I hope it helps you, All the best 👍.

Follow me on Twitter

Join our email list and get notified about new content

No worries, I respect your privacy and I will never abuse your email.

Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.

Looking For React Native Tutorial?

we are trying to create the best Tutorial for react native developers.

When you want a daily updates about React Native Tutorial or infinitbility update subscribe to our newsletter.

Read React Native Tutorial

Request New Tutorial or Article on mail [email protected]

Guide book

Guidebook: The Javascript Monorepo Photoshop Guide

Tutorials

Categories

More articles from Infinitbility

react js convert string to number

react js convert string to number

An example of convert string to int in react js with a step-by-step example.

July 3rd, 2022 · 1 min read
how to get length of array in react js?

how to get length of array in react js?

An example of get length of array in react js with a step-by-step example.

July 2nd, 2022 · 1 min read
© 2020–2022 Infinitbility
About
Link to $https://medium.com/infinitbilityLink to $https://www.facebook.com/InfinitbilityLink to $https://github.com/infinitbilityLink to $https://twitter.com/infinitbilityLink to $https://www.buymeacoffee.com/infinitbilityLink to $mailto:[email protected]