CODEWITHSUNDEEP
javascripthtmlreactjsstringtags
BayBay
BayBay

Reputation: 107

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

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

Upvotes: 5

Views: 698

Answers (5)

Roh&#236;t J&#237;ndal
Roh&#236;t J&#237;ndal

Reputation: 27192

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);

Upvotes: 5

Ines
Ines

Reputation: 128

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

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

Upvotes: 1

user1177119
user1177119

Reputation: 27

Try adding this under your code

<Markup content={textHtml} />

source: https://www.codegrepper.com/code-examples/html/display+string+with+html+tags+react+js

Upvotes: 0

thathurtabit
thathurtabit

Reputation: 598

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>
 )

Upvotes: 1

Arafat Ahmed
Arafat Ahmed

Reputation: 144

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

Upvotes: 1

Related Questions