Navigate back to the homepage

Get first letter of each word in a string in react js

Infinitbility
React
June 28th, 2022 · 1 min read
Get first letter of each word in a string in react js

Hi 👋,

Welcome To Infinitbility! ❤️

To get first letter of each word in react js, just use string.split(' ').map(i => i.charAt(0)) it will split your string with space ( you can put any other separator also ), and help of map() and charAt() method it will return array of first letter of each word.

Or instead of array you want as a string of first letter of each word just use join('') method after map() like this string.split(' ').map(i => i.charAt(0)).join('').

1function getFirstChar(str) {
2 const firstChars = str
3 .split(' ')
4 .map(word => word[0])
5 .join('');
6
7 return firstChars;
8}
9
10// 👇️ ABC
11console.log(getFirstChar('Alice, Bob, Charlie'));
12
13// 👇️ ONE
14console.log(getFirstChar('Oscar Noah Emily.'));

Today, I’m going to show you How do I get the first letter of each word in a string in to react js, as above mentioned here, I’m going to use the Object.keys() method with length to check empty objects.

Let’s start today’s tutorial how do you get the first letter of every word in a string in react js?

In this example, we will do

  1. Create a sample string state
  2. Create a function that returns the first char of each word
  3. Call function from function and component

Let’s write code…

1import React, { useState, useEffect } from "react";
2import "./styles.css";
3export default function App() {
4 const [sampleString, setSampleString] = useState(
5 "Java Script Object Notation"
6 );
7
8 const getFirstChar = (str) => {
9 const firstChars = str
10 .split(" ")
11 .map((word) => word[0])
12 .join("");
13
14 return firstChars;
15 };
16 useEffect(() => {
17 let short = getFirstChar("Internet of things");
18 console.log(short);
19 }, []);
20 return (
21 <div className="App">
22 <h1>{getFirstChar(sampleString)}</h1>
23 </div>
24 );
25}

As mentioned above, we are taken the example of a sample string state, created a function that returns the first char of each word, using a function, and printed output on a screen.

Let’s check the output.

I hope it’s help 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

how to check empty object in react native?

how to check empty object in react native?

An example of check empty object in react native with step by step guide.

June 28th, 2022 · 1 min read
how to fix ngrok your account is limited to 1 simultaneous ngrok client session issue?

how to fix ngrok your account is limited to 1 simultaneous ngrok client session issue?

An example of resolve ngrok your account is limited to 1 simultaneous ngrok client session issue.

June 27th, 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]