How to display only tag <h1> in string, reactjs

user_17821173 0
Viewed 83

how to display only tag in variable string,

const textHtml = "<h1>What events are you looking for today?</h1> <p>Find more events you want!</p>"

output : What events are you looking for today? Find more events you want!

expected : What events are you looking for today? just show the tag h1, the tag p, i won't the tag p is showing

and the output only display tag <h1> and the tag <p> is delete/not showing, cause value string of textHtml is a value from api response. And i don't how to display only the tag <h1>.

can anyone help me, please? And sorry for my bad english, thankyou

reactjs tags html javascript string
5 Answers

As you want to remove the whole <p> element from the textHtml string. You can easily achieve it by using RegEx with the help of String.replace() method.

Live Demo :

const textHtml = "<h1>What events are you looking for today?</h1> <p>Find more events you want!</p>"

const res = textHtml.replace(/<p>*.*<\/p>/, '');

console.log(res);

user_41163000

&lt;h1&gt;What events are you looking for today?&lt;/h1&gt;

user_49328770

You're storing multiple HTML elements in a string, but you'll likely want to wrap multiple elements in a <Fragment>, i.e.:

import { Fragment } from 'react'

const titleAndP = (
   <Fragment>
      <h1>What events are you looking for today?</h1>
      <p>Find more events you want!</p>
    </Fragment>
 )
user_7438620

You need to wrap the code. You can do it with empty tags (typical in ReactJS)

const html = (
    <>
        <h1>title</h1>
        <p>paragraph</p>
    </>
)
user_146280750
user_187479930
Related