Click on <a href='https://test.com' target="_blank">https://test.com</a>
2. Select data
2.1 Filter by Database Name
2.5 Click Save
3. Select DB
3.1 Check Primary
I'am sending the above string data coming from database to react and it is getting displayed inside the 'pre' tag.But the href link inside the string is not showing as a link.it is showing the complete text as it is.. how to show link inside pre tag?
please consider using dangerouslySetInnerHTML attribute in react.
function createMarkup() {
return {__html: 'First · Second'};
}
function MyComponent() {
return <div dangerouslySetInnerHTML={createMarkup()} />;
}
for more info visit :https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml
Also consider XSS attacks when you want show raw data from database.
If you only pass a normal string to React render function, it is by default treated as a normal string because of XSS vulnerability, which is also why a separate prop is created specifically to inject innerHTML to remind developer that injecting HTML is dangerous.
Here's a working example:
class Pre extends React.Component {
render(){
return React.createElement(
'pre',
{
dangerouslySetInnerHTML: {
__html: `Click on <a href='https://test.com' target="_blank">https://test.com</a>
2. Select data
2.1 Filter by Database Name
2.5 Click Save
3. Select DB
3.1 Check Primary`
}
},
null
);
}
}
ReactDOM.render(
React.createElement(Pre, null, null),
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>