I am using Chakraui library for reactjs
I am saving the string version of the code into a database, then retrieving it and rendering to user. For demo I assign it to a variable. When I try to render it, it doesn't apply the component <Code/> which formats the text
const test = `text text <Code>text</Code>`;
<div dangerouslySetInnerHTML={{ __html: test }} />
Related
I have a personal site where I call google blogger API to get the post content and then use dangerouslySetInnerHTML={{ __html: postContent }}> to show the content on my page.
everything works fine, except one problem.
Problem is, that my post contains my GISTs from my GitHub, and because the gists are embedded as <script> tags, those are not showing up after setting the innerHTML.
Is there a way to make script work after we insert the content in react by dangerouslySetInnerHTML
UPDATE
It seems this question was answered here, but the answer was 6 years ago by using the componentDidMount method when react was using class component.
In my case, I’m using a functional component.
In the post component I'm using useEffect where I’m calling API to get the data and setting a state postContent, using the useState hook.
I believe I need to create another useEffect hook but what to monitor in second useEffect hook so I can call window.eval(<all scripts>); only after the new html element which are set by dangerouslySetInnerHTML are available in DOM
Here is a SAMPLE code of my component.
function Post() {
const {postId} = useParams();
const [postContent, setPostContent]
= useState('<div>Loading..<div>');
useEffect(() => {
setPostContent(callApi().data.content)
},[postId])
return (
<div className="content"
dangerouslySetInnerHTML={{ __html: postContent }}>
</div>
);
}
I'm building app with React and Strapi and to add an article im using CKEditor 5 for the content.
In the editor it all works fine it accepts headings bolds paragraphs but when i read it on front end it just gives content wrapper in <p> tag
This is my CKEditor input code
<CKEditor
name="longContent"
editor={ClassicEditor}
data={modifiedData.longContent}
onChange={this.handleCKchange}
/>
The onChnage handler
handleCKchange = (event, editor) => {
const data = editor.getData();
this.state.modifiedData.longContent = data;
};
This is how i call it on front end
<div className="post-longContent">
{modifiedData.longContent}
</div>
This is how it outputs
duplicate. previously i use dangerouslySetInnerHTML but it is not recommended i presume.
Background
I am working on a React application. I need to place some HTTML inside a div. But I need to pass a tooltip package inside the HTML I pass. I want to eventually only have the tooltip trigger on certain words. For now, I just want the package to show up when I wrap the entire html element string
Code
I basically want to do this
import Tippy from '#tippy.js/react';
const App = () => {
const myHtmlString = '<p>Hi</p>`;
const text = <Tippy content={myHtmlString} />;
return (
<div dangerouslySetInnerHtml={{ __html: text }} />
)
}
Problem
This renders [object Object]
I would like to render the text surrounded by the tooltip instead.
I am using react-native-webview-quilljs to render formatted HTML text. It works fine on Android and iOS but it isn't supported on the Web (i.e. react-native-web/expo-web). So I managed to strip the HTML tags when rendering the formatted string on the browser (i.e. rendering non formatted text).
Then I got to realise that react-native-web actually uses React to render react-native components on the browser. And React has something as dangerouslySetInnerHTML that allows injecting HTML string to be rendered directly on the browser.
So, is there a way to use dangerouslySetInnerHTML from the react-native / expo project.
Upon close inspection I found that the html tags gets converted to the html entities while rendering on the browser. Take a look at the image below.
Solved it (would rather call it a workaround) by rendering a <div> with dangerouslySetInnerHTML prop when Platform.OS === 'web'.
Example:
Platform.OS === 'web'
? <div dangerouslySetInnerHTML={{ __html: Details }} />
: <View style={{flex: 1}}>
<WebViewQuillJS
backgroundColor={'transparent'}
content={Details}
isReadOnly
/>
</View>
I'm trying to render some html, stored in a DB, and put a component inside.
It'd look like this:
import ReactMarkdown from 'react-markdown/with-html';
const inlineCode = (props) => <Gist id={props.value} />;
const source = '`7df0c9a5d794504a28bd3256b7bf5c4f` <p>asdasdasd</p><h1>title</h1>';
ReactMarkdown is used like this:
<ReactMarkdown source={source} renderers={{ inlineCode }} escapeHtml={false} />
The result is is rendered properly and the block is also, but isn't, the contents are outside of the block.
If I wrap the whole source with a <div>, the <Gist/> is rendered as text and <p>/<h1> are rendered properly.
What am I missing? I'm trying to store html with custom components inside, <Gist/> is just an example. Suggestions for a (more) suitable library are also welcome. Example ideal source I'd like to store in a db and then render in a React component:
<div>
<p>
<CustomReactComponent/>
<br/>
test
</p>
<Gist/>
</div>
Okay I found this lib: https://github.com/probablyup/markdown-to-jsx
If your source looks like:
const source = `<gist id="yourIdHere" /> <h1>asdasdasd</h1>`;
<Markdown
options={{
overrides: {
gist: {
component: renderGist,
},
},
}}
>
{content}
</Markdown>
It renders both the <Gist> and the normal <h1> as <h1. Paragraph tags seem to be automatically added if you add line breaks and something like # Title is also automatically wrapped.
<Gist> in source is converted to lowercase, so it'd only matter for the overrides object (lowercase again). Handles all my custom stuff and html predictably.