Only renders paragraphs in React?
See original GitHub issueAm I doing something silly? Have the helper working and outputting HTML as a string, but there’s no conversion of blocks that aren’t paragraphs:
import { documentToHtmlString } from '@contentful/rich-text-html-renderer';
// import styled from 'styled-components';
class RichTextRenderer extends React.Component {
// eslint-disable-line react/prefer-stateless-function
render() {
const { content } = this.props;
const article = documentToHtmlString(content);
return <div dangerouslySetInnerHTML={{ __html: article }} />;
}
}
RichTextRenderer.propTypes = {};
export default RichTextRenderer;
gives me the following output in browser and misses embedded assets entirely:
Christmas plans sorted? You’ll want our NYE guide: type: embedded-entry-inline id: 1ICVc1UQU8KiO8wuOqoOsc
Issue Analytics
- State:
- Created 5 years ago
- Comments:7 (1 by maintainers)
Top Results From Across the Web
Rendering plain text with paragraphs and line breaks as HTML
I am not specially happy with the code. It is not very readable. Any ideas how to improve it? react.js · jsx.
Read more >Best Way to Render Multiple Paragraph Text read from JSON ...
Into the "answer" field in my json object. Then I'll replace it in my React component as so and read from the json...
Read more >Rendering Elements - React
To render a React element, first pass the DOM element to ReactDOM. ... In practice, most React apps only call root.render() once. In...
Read more >How to Return Plain Text from a React Component | Pluralsight
In this short guide, we are going to explore how to return plain text from a React component and some alternatives.
Read more >React JSX - W3Schools
Exercise: Render a <p> element without using JSX. const paragraph = React.createElement( , {}, 'This is a paragraph ...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@Khaledgarbaya, is it possible to use a fluid
gatsby-image
component with[BLOCKS.EMBEDDED_ASSET]
?I know fluid images have to use GraphQL. Would I need to use
allContentfulAsset
and then find the image that’s passed into[BLOCKS.EMBEDDED_ASSET]
asnode
? Maybe use<StaticQuery>
insiderenderNode
?Hey @Khaledgarbaya, it seems that
node.data.target.fields
is no longer available. I’m not seeing it in the GraphQL responseSince we can’t access
node.data.target.fields
, what would be the best way to render embedded entries?