score:1
fyi, template literals are string literals.
https://developer.mozilla.org/en-us/docs/web/javascript/reference/template_literals
you can just remove the template literal :)
var article = {
title: 'hello world',
}
const app = () => {
var {title} = article
var html = <header>
<h1>{title}</h1>
</header>
return <div>{html}</div>;
}
score:0
you can do so with react's dangerouslysetinnerhtml but as you can tell from the name, it is dangerous because it’s easy to inadvertently expose your users to a cross-site scripting (xss) attack.
you can still use it if you understand the risk:
import react from 'react';
var article = {
title: "hello world"
};
const app = () => {
var { title } = article;
return (
<div
dangerouslysetinnerhtml={{
__html: `<header><h1>${title}</h1></header>`
}}
/>
);
};
if you are just trying to embed expressions in jsx, simply wrap them in curly braces:
import react from "react";
var article = {
title: "hello world"
};
const app = () => {
var { title } = article;
return (
<div>
<header>
<h1>{title}</h1>
</header>
</div>
);
};
score:0
in your case, the variable html
is just a string, and when you try to render it inside the jsx like <div>{html}</div>
it is explicitly being rendered as a string rather than html.
it is nothing different than trying to render <div>{"<header>hello there</header>"}</div>
. while saving to the result that you want to a variable works, i wouldn't recommend it. for your use-case it is much simpler to just use jsx directly instead. for example,
var article = {
title: "hello world"
};
const app = () => {
var { title } = article;
return (
<div>
<header>
<h1>{title}</h1>
</header>
</div>
);
};
if you have a lot of elements that you were trying to render, abstracting the logic to a new component is always a better idea. for example,
// new header component
const header = (props) => {
return (
<header>
<h1>{props.title}</h1>
{/* other-components or elements you want to render */}
</header>
);
}
var article = {
title: "hello world"
};
const app = () => {
var { title } = article;
return (
<div>
<header title={title}/>
</div>
);
};
Source: stackoverflow.com
Related Query
- How to turn template literal into html in ReactJS?
- How to convert html template which load external html to reactjs
- How to insert Bold tags into a template literal string in react and typescrip
- How to insert HTML inside template literal strings?
- How to put value(data) into html attribute with ReactJS and ReactIntl
- How to turn HTML widget code into NEXTjs code to use in an app (CoinMarketCap Price Marquee Ticker)
- How to display template literals inside template literal in HTML children property?
- How to insert React state value into HTML Template with predefined value in Sun Editor?
- How to properly fit an image into a div in HTML and CSS using ReactJS
- How to turn on/off ReactJS 'development mode'?
- Reactjs: how to put the html template in a separate file?
- How to convert a html template to react?
- Reactjs How to insert react component into string and then render
- How to do POST in FORM Submit using reactjs and pass the object value into REST service?
- moving from twig to ReactJS: how to extend a template/component to build full reactJS pages? implement react-router and redux into symfony?
- How do I insert a Django template variable into a React script?
- how to import HTML file into React component and use it as a component?
- How to include the Match object into a ReactJs component class?
- How to incorporate semantic HTML into React?
- How to transform plain text to html JSX in ReactJS
- How to upload image using ReactJS and save into local storage?
- How to use Django template in ReactJS
- How to get html code from reactjs component
- How to import client-side HTML into Gatsby/React?
- How to convert String into a HTML element in Next JS Applcation?
- How does SEO play into the ReactJS page changes
- How to Merge React App into existing Website with existing HTML structure
- How to get CSV data using Reactjs and store into state?
- In a ReactJS app, how to substitute env vars from the global environment into my index.html file?
- How to extract kotlin-react html into a method
More Query from same tag
- What approach should be used to test a SocketIO Client app using Jest?
- Sort array by date via re-rendering
- Resolve Relative Path from node_modules to Dist folder with Webpack
- One state goes down and one doesn't
- What is the best way to set object properties when filling a complex form in React
- How to update a React's state with a matrix
- I get a Nan error certainly due to my render() business logic
- Save SVG as PNG (or other) with javascript
- How to save axios response to a variable and update the state in react js?
- React: Get DOM data from sibling elements
- How to set color of only the clicked IconButton - ReactJS?
- redirect all /api/.. requests to express
- Displaying content from text editors in React App
- How to solve "TypeError: process.getuid is not a function"
- How use 'application/x-www-form-urlencoded' in Get method with axios
- Error while passing params in axios with React
- How to get the value of variable to change the css of body/root element in reactJS?
- How to add data in my reducer based on ID
- Making UI update when comments are deleted.
- How to programmatically set focus on input
- How in React native destroy an component instance to avoid memory leak and release underlie views objects of native code?
- Map doesn't work in render after fetch in React JS
- In React JavaScript, How to call a class inside another class?
- access root element of react component
- HMR for create-react-app with react-redux
- Webpack SCSS "Flicker" before pageload
- How to use useTheme hook from Material-UI?
- React focus div after it has loaded
- Use firebaseui authentication with a modal popup (ReactJS)?
- Overwriting react component when using it