question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Only renders paragraphs in React?

See original GitHub issue

Am 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:closed
  • Created 5 years ago
  • Comments:7 (1 by maintainers)

github_iconTop GitHub Comments

3reactions
codeithumancommented, Jan 30, 2019

@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] as node? Maybe use <StaticQuery> inside renderNode?

2reactions
alejandronanezcommented, Aug 25, 2020

Hey @Khaledgarbaya, it seems that node.data.target.fields is no longer available. I’m not seeing it in the GraphQL response

Since we can’t access node.data.target.fields, what would be the best way to render embedded entries?

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found