Replace String in content - reactjs

Question

Take a look on my Chat.js contents:
import React, { Component } from "react";
class Chat extends Component {
constructor(props) {
super(props);
this.state = {
messages: [],
message: ""
};
}
submitMessage(event) {
event.preventDefault();
this.setState(state => ({
messages: [<li>{this.state.message}</li>, ...state.messages]
}));
this.setState({
message: ""
});
}
render() {
return (
<>
<div class="container py-3">
<h2 className="text-center mb-4">Simple Chat</h2>
<form
onSubmit={e => {
this.submitMessage(e);
}}
>
<input
type="text"
className="form-control"
placeholder={"Enter your message..."}
value={this.state.message}
onChange={e => this.setState({ message: e.target.value })}
/>
<button type="submit" className="btn btn-success mt-2">
Send Message
</button>
</form>
<div className="container border mt-2">
<ul className="group-list mt-3 pt-2">{this.state.messages}</ul>
</div>
</div>
</>
);
}
}
export default Parent;
Also, this is my example:
https://codesandbox.io/s/objective-water-1e8uq
i need to replace user link when anyone type username with #
for example, this is my message content:
Are you good #Daniel ?
I need to convert above message to following content:
Are you good #Daniel ?
I use react-router-dom, so i need to replace link with this code:
Eg:
<Router>
<Link to={ '#'} onClick={() => {this.example()}}>
#Daniel
</Link>
</Router>;

Answer 1

It should be done with a string replace:
// This is to have as tag "Are you good #Daniel ?" (with # in the username)
const replacementReg = /(#[a-zA-Z0-9]+)/g;
// This is to have as tag "Are you good Daniel ?" (without # in the username)
const replacementReg = /#([a-zA-Z0-9]+)/g;
function decorateWithLink(text) {
text.replace(replacementReg, replaced => ` ${replaced} `);
}
and you should use in your component:
this.setState(state => ({
messages: [
<li>{decorateWithLink(this.state.message)}</li>,
...state.messages
],
message: '' // with this you don't need to call again the this.setState
}));

Answer 2

I have updated your submitMessage function here is the code:
submitMessage(event) {
event.preventDefault();
const { message } = this.state;
let msg = message.replace(/#([a-zA-Z0-9]+)/g, value => ` ${value} `);
this.setState(state => ({
messages: [<li dangerouslySetInnerHTML={{__html: msg}} />, ...state.messages]
}));
this.setState({
message: ""
});
}
here is the working code: https://codesandbox.io/s/stupefied-platform-zmg94