ReactJs: How to escape <p> enclosing data rendering from props

Question

How could I escape <p> enclosing data that are coming from Back-end in props . I want to display my texts without this <p> enclosing tags around the texts.

ex:

props {
 explain: "`<p>`!! Check-in `</p>`"
}

how could i display this as

`props.explain` as "!! Check-in"

Any suggestions

Answer 1

If you prop would have name explain you can use regex: explain.replace(/<p[^>]*>|<\\/p[^>]*>/g, "");

so in react code you could use:

render() {
  const { explain } = this.props
  return (
    { explain.replace(/<p[^>]*>|<\/p[^>]*>/g, "") }
  )
}```

Answer 2

The proper way would be to remove the html tags from backend. However if you can't do that:

myVariable.replace(/<[^>]*>/g, "")

It would remove all the html tags from a given string.