I have the following code.
export default function App() {
const defaultText = "Your partner for software innovations";
const colorText = "softWare";
const result = defaultText.split(" ").map((txt) => txt);
return <div className="App">{result}</div>;
}
defaultText is my data from the backend.
colorText is a word that should be colored.
So I am trying to do the following. I want to map through the defaultText and compare if txt === colorText then set that word for example in red color.
I easily can map defaultText as you see but I can't understand how to implement that filtering logic.
The final result should be like this
You can split the text into parts and then add a class to the text to highlight.
Pseudo code:
const defaultText = "Your partner for software innovations";
const colorText = "software";
const segments = defaultText.split(colorText);
return (
<div className="App">
{segments.map((segment, index) => (
<Fragment key={index}>
<span>{segment}</span>
{(index !== segments.length - 1) && (<span>{colorText}</span>)}
</Fragment>
)}
</div>
);
And CSS:
span.highlight {
color: red;
}
If you want the keyword to match regardless of the letter's case, you can use RegEx when splitting.
Just replace the string, with the same string but with a style="color:(some color);"
defaultText.replace("software", "<span style='color:red;'>software</span>");
import "./styles.css";
export default function App() {
const defaultText = "Your partner for software innovations";
const colorText = "software";
const result = defaultText
.split(" ")
.map((txt) =>
txt === colorText ? (
<span className="colorText">{colorText} </span>
) : (
<span>{txt} </span>
)
);
return <div className="App">{result}</div>;
}
styles.css
.colorText{
color red
}
Try out with this solution. It worked for me