CODEWITHSUNDEEP
javascriptreactjs
gANDALF
gANDALF

Reputation: 238

Display Links from text in react

I have created a tagging system where user can tag other users in the text with @ notation ,I am saving the whole tweet inn db ,but while retrieving I am getting a text displayed like this

Hi My first tweet<Link to='/userprofile/ron'> @ron</Link>

How to make it display like

Hi My first tweet [@ron][1]

where @ron is a link

Upvotes: 1

Views: 1728

Answers (2)

Vince
Vince

Reputation: 869

// 1. create component

let linkItem = (props) => <p>Hi My first tweet <Link>{props.name}</Link></p>

Upvotes: 0

kind user
kind user

Reputation: 41893

You can use dangerouslySetInnerHTML.

const text = "Hi My first tweet<Link to='/userprofile/ron'> @ron</Link>";

<div dangerouslySetInnerHTML={{ __html: text }} />

Note: Make sure to import Link from react-router. Also keep in mind that this is risky due to potential XSS attack.

Upvotes: 1

Related Questions