CODEWITHSUNDEEP
javascriptreactjstemplate-literals
Ivana
Ivana

Reputation: 842

Inserting html tags in template literals in React

I have variable with template literal in React:

const weatherForecast = `
  Today in <strong>${this.state.cityName}</strong>
  weather will be with <strong>${today.weather_state_name}</strong>,
  min temperature <strong>${parseInt(today.min_temp)}°C</strong>,
  max temperature <strong>${parseInt(today.max_temp)}°C</strong>,
  and humidity will be <strong>${today.humidity}%</strong>
`;

and I want to insert HTML code in it, as you can see that is tag . Is this possible and how can I do this. I googled it, but I couldn't find the answer.

Upvotes: 14

Views: 28424

Answers (7)

fruitloaf
fruitloaf

Reputation: 2892

const myString = <>{'Util for '}<b>{'yo'}</b></>

return (
    <div>
        {myString}
    </div>
);

Upvotes: 0

Mohammed Yousuff
Mohammed Yousuff

Reputation: 326

I had something similar to this issue had to insert elements in attribute i just used some thing like this and it got fixed.

<Component title={
   <Fragment>
      <p>Some text <strong>bold text</strong></p>
      <p>Another paragraph <i>text italic</i></p>
   </Fragment>
 } />

Upvotes: 0

Ehsan Paknejad
Ehsan Paknejad

Reputation: 688

Write in JSX:

const weatherForecast = <div>
  Today in <strong>{this.state.cityName}</strong>
  weather will be with <strong>{today.weather_state_name}</strong>,
  min temperature <strong>{parseInt(today.min_temp)}°C</strong>,
  max temperature <strong>{parseInt(today.max_temp)}°C</strong>,
  and humidity will be <strong>{today.humidity}%</strong>
</div>;

Remember to omit the dollor signs ($)

Upvotes: 1

Prithwee Das
Prithwee Das

Reputation: 5226

const weatherForecast = 
`Today in <strong>${this.state.cityName}</strong> weather will be with <strong>${today.weather_state_name}</strong>, min temperature <strong>${parseInt(today.min_temp)}°C</strong>, max temperature <strong>${parseInt(today.max_temp)}°C</strong>, and humidity will be <strong>${today.humidity}%</strong>`;

React will treat this as a string and not jsx. What you can do instead is

const weatherForecast = 
<p>Today in <strong>{this.state.cityName}</strong> weather will be with <strong>{today.weather_state_name}</strong>, min temperature <strong>{parseInt(today.min_temp)}°C</strong>, max temperature <strong>{parseInt(today.max_temp)}°C</strong>, and humidity will be <strong>{today.humidity}%</strong></p>;

and then render this in your render method like this

render(){
  return <div>{weatherForecast}</div>
}

Upvotes: 30

Amol B Jamkar
Amol B Jamkar

Reputation: 1257

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

You can use this code to display.

Upvotes: 1

Tholle
Tholle

Reputation: 112787

You can use dangerouslySetInnerHTML to render HTML from a string with React, but make sure you only use it if you absolutely have to and you control the values.

Example

class App extends React.Component {
  state = {
    cityName: "New York",
    today: {
      weather_state_name: "Foo",
      min_temp: 0,
      max_temp: 10,
      humidity: 50
    }
  };

  render() {
    const { today } = this.state;
    const weatherForecast = `
      Today in <strong>${this.state.cityName}</strong>
      weather will be with <strong>${today.weather_state_name}</strong>,
      min temperature <strong>${parseInt(today.min_temp)}°C</strong>,
      max temperature <strong>${parseInt(today.max_temp)}°C</strong>,
      and humidity will be <strong>${today.humidity}%</strong>
    `;
    return <div dangerouslySetInnerHTML={{ __html: weatherForecast }} />;
  }
}

ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

Upvotes: 3

Tomal
Tomal

Reputation: 127

You need to parse HTML, because in your case it will show you your tags instead of making text strong.

You can use for example import ReactHtmlParser from 'react-html-parser';

ReactHtmlParser(weatherForecast)

Does it answer your question?

Upvotes: 1

Related Questions