How can I replace bits or string with React component, react-router-dom Link or an anchor tag <a></a>

Zinox Published at Dev

Zinox

How can I replace bits of string with links or components

This is a sample of the data

Ownership of Product/DiJUHl5zCE changed from Org/abcd to Org/efghi
Stage changed to completed for Payment of 254.15 gbp on Cycle Cycle/svgAjnox5t
Ownership of Product/DSGDHFHFDH changed from Org/sdef to Org/juhtr
Stage changed to completed for Payment of 4.15 gbp on Cycle Cycle/fdlkgdfkjdfl

I want to replace

Ownership of Product/DiJUHl5zCE changed from Org/dvju to Org/kijuy

Ownership of Product changed from OrgName to OrgName

Ownership of <a href="/product/Product/DiJUHl5zCE">Product</a> changed from <a href="/org/Org/abcd">OrgName</a> to <a href="/org/Org/efghi">OrgName</a>

and

Stage changed to completed for Payment of 254.15 gbp on Cycle Cycle/svgAjnox5t

Stage changed to completed for Payment of 254.15 gbp on Cycle Cycle

Stage changed to completed for Payment of 254.15 gbp on Cycle <a href="/cycle/Cycle/svgAjnox5t">Cycle</a>

I also have a regex

/([\w\d]+)\/([\w\d-]+)/g;

https://regex101.com/r/VrqlI7/1

that returns the groups but if I use replace() or replaceAll() the second argument returns string and in the browser it comes out as [object, object]

basically pass each line through a function and return a div with bits of text replaced with links

I am relatively new to react. any help much appriciated.

If I use `` at the start

if I use `` withing the href

How can I get this to display as links, Please advice

dmitryguzeev

You can use replaceAll with a callback

s.replaceAll(/([\w\d]+)\/([\w\d-]+)/g, (a) => {
  if (a.startsWith("Product")) { return `<a href="/product/${a}">${a}</a>` }
  else if (a.startsWith("Org")) { return `<a href="/org/${a}">${a}</a>` }
  else { return a }
})

Collected from the Internet

Please contact [email protected] to delete if infringement.