0
134
ViewsHow to split words further into letters in react hooks
I have made a split of the Text. Now I want to split it further into a single letter/character. Further I want to extent the splitting process to a set of array which is inside the content.
Below is my react code:
import React from "react";
import "./styles.css";
import content from "./content";
// Splitting Texts
const SplitText = React.memo(({ str }) => {
return (
<div>
{str.split(" ").map((item, index) => {
return <div key={index}>{item}</div>;
})}
</div>
);
});
// Main App
export default function App() {
return (
<div className="App">
<h1>
<SplitText str={"Lucie Bachman"} />
</h1>
<h2>
<SplitText str={"Hey, this is my first post on StackOverflow!"} />
</h2>
</div>
);
}
·
Juan Pablo Isaza
2 answers
Answer question0
you can use the same split API on string to get the letters
console.log("string".split('')); // ['s', 't', 'r', 'i', 'n', 'g']
·
Juan Pablo Isaza
Report
0
When you are using str.split(" ") then you are saying that split the string with separator as " ". It will split the string where the space is there in the string.
But what you want is to split the string with each character, for that you have to split the string with "" as
Live Demo
<div>
{str.split("").map((item, index) => {
return <div key={index}>{item}</div>;
})}
</div>
Resources
·
Juan Pablo Isaza
Report
Answer question