How to replace a string with another and with a different colour in ReactJS?

Question

I have a string mapped from an array and I have used a regexp to return particular text. I want this particular text to have a different color when it is rendered. However the current approach fails as it wont let me just set the style of the string in pure javascript. Is there a way around fixing this so the replace can work with the new text as a different colour.

Ideally, the final outcome would look like this

@user This is text

Whereby @user is blue and the rest is black

{this.state.dataReplies.map((n, i) => {
            var re = /@(\S+)\b/g;
            let oldstr = n.description.match(re);
            console.log(oldstr);
            let newstr = oldstr.style.colour = "#0066ff";
            let str = n.description.replace(oldstr, newstr);
    return (
      <p>{str}</p>
    );
})}

You can't style a plain string. Instead just wrap the selected stuff in a <span/> which has the desired styling. — Jayce444
– Jayce444, Commented Jan 7, 2020 at 0:37

ShaneOG97 · Accepted Answer · 2020-01-07 01:14:34Z

2

Thanks to @Jayce444 for the solution:

{this.state.dataReplies.map((n, i) => {
            var re = /@(\S+)\b/g;
            let oldstr = n.description.match(re);
            let str = n.description.replace(oldstr, "");
    return (
      <p> <span style={{color: "#0066ff"}}>{oldstr}</span> {str}</p>
    );
})}

edited Jan 7, 2020 at 1:14

answered Jan 7, 2020 at 0:44

ShaneOG97

5302 gold badges11 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to replace a string with another and with a different colour in ReactJS?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related