Rich-Text-React-Renderer Does not Render h1 or Spaces Between Paragraphs

Julius Goddard 0
Viewed 23

I was following a tutorial on Gatsby.JS which tells you how to render blog posts on Contentful.

I followed the tutorial exactly and it seems like in the tutorial - h1 tags are rendered as h1 automatically without having to configure any extra options. Also, spaces are automatically rendered between paragraphs. This is not the case in my app.

BlogPost

This post renders like this in my app:

Rendered Post

Are there any extra options I need to configure to make h1 render as h1 and for there to be spaces where I have specified spaces in contentful?

Here is my code:

    import React from 'react'

import Layout from '../components/Layout'
import { graphql } from 'gatsby'
import { documentToReactComponents } from '@contentful/rich-text-react-renderer'
import { renderRichText } from "gatsby-source-contentful/rich-text" 
import { GatsbyImage, getImage } from "gatsby-plugin-image"
import Head from '../components/head'
import '../styles/global.css'

export const query = graphql`
query($slug: String!) {
    contentfulBlogPost(slug: {eq: $slug}) {
        title
        publishedDate(formatString: "MMMM Do, YYYY")
        body {
            raw
            references {
                ... on ContentfulAsset {
                    title
                    contentful_id
                    __typename
                    gatsbyImageData(width:750)
                    description
                }
            }
        }
    }
}`

const Blog = (props) => {
    const options = {
        renderNode: {
            "embedded-asset-block": (node) => {
                const { gatsbyImageData, description } = node.data.target
                if (!gatsbyImageData) {
                    // asset is not an image
                    return null
                }
                return (
                    <GatsbyImage image={getImage(gatsbyImageData)} alt={description} />
                )
            }
        }
    }

    return (
<Layout>
    <Head title={props.data.contentfulBlogPost.title} />
    <div className="blogtitlediv">
        <div className="innerblogtitlebox">
        <h1 class="text-5xl text-white text-center">{props.data.contentfulBlogPost.title}</h1>
        </div>
    </div>
   
   <div class="container py-8 px-8">
   <div class="my-10">
    {documentToReactComponents(JSON.parse(props.data.contentfulBlogPost.body.raw), options)
    &&
    renderRichText(
        props.data.contentfulBlogPost.body, options
    )}
     <p className="date" class="flex flex-row-reverse italic py-6 mx-8">{props.data.contentfulBlogPost.publishedDate}</p>
     </div>
     </div>
</Layout>
    )
}

export default Blog
richtext contentful reactjs
1 Answers

The answer is to add a style to THIS PARTICULAR DIV where the content from Contentful is rendered as opposed to the entire div or the entire page. Use "className = {blogStyles.contentStyles} as seen below :

<div class="my-10" className={blogStyles.contentStyles}>
    {documentToReactComponents(JSON.parse(props.data.contentfulBlogPost.body.raw), options)
    &&
    renderRichText(
        props.data.contentfulBlogPost.body, options
    )}
     <p className="date" class="flex flex-row-reverse italic py-6 mx-8">{props.data.contentfulBlogPost.publishedDate}</p>
     </div>

Then you have to create a new styles file for the content called blog.module.scss

I added the following styles which I imported from './blog.module.scss

 .contentStyles {

p {
    margin-top: 2rem;
  }

h1 {
    margin-top: 2rem;
    font-size: 3rem;
    }

h2 {
    margin-top: 2rem;
    font-size: 2rem;
  }
}

This then changes the h1 styles in Contentful and adds spaces between the paragraphs

Julius Goddard0
Related