Search code examples
reactjsgatsbycontentful

Gatsby renderRichText with Contentful doesn't render hyperlink

I'm rendering a blog post by querying data from contentful. Everything works fine except for hyperlinks.

My options object:

const options = {
  renderMarks: {
    [MARKS.BOLD]: (text) => <span className="bold">{text}</span>,
  },
  renderNode: {
    [BLOCKS.HEADING_1]: (node) => {
      return (
        <H1>
          {node.content.map((element, index) => {
            return <span key={index}>{element.value}</span>
          })}
        </H1>
      )
    },
    [BLOCKS.HEADING_2]: (node) => {
      return (
        <H2>
          {node.content.map((element, index) => {
            return <span key={index}>{element.value}</span>
          })}
        </H2>
      )
    },
    [BLOCKS.PARAGRAPH]: (node) => {
      return node.content.map((element, index) => {
        return <Paragraph key={index}>{element.value}</Paragraph>
      })
    },
    [BLOCKS.QUOTE]: (node) => {
      return (
        <Quote>
          {node.content.map((quote) =>
            quote.content.map((element, index) => {
              return <span key={index}>{element.value}</span>
            })
          )}
        </Quote>
      )
    },
    [BLOCKS.EMBEDDED_ASSET]: (node) => {
      return (
        <GatsbyImage
          className="img-full"
          image={node.data.target.gatsbyImageData}
          alt="contentful-image"
        />
      )
    },
    [INLINES.HYPERLINK]: ({ data }, children) => {
      console.log(children, data)
      if (Array.isArray(children)) {
        console.log("is array", children[0])

        return <div>Test</div>
      }
      return <div>test</div>
    },
  },
}

const handleContentfulRichText = (module) => {
  console.log(module)
  return (
    <RichText key={module.id}>{renderRichText(module.body, options)}</RichText>
  )
}

I iterate over the data from contentful and when the type is of ContentfulRichText i call renderRichText()

const handleContentfulRichText = (module) => {
  console.log(module)
  return (
    <RichText key={module.id}>{renderRichText(module.body, options)}</RichText>
  )
}

enter image description here The image above shows a paragraph followed by text with a hyperlink. The hyperlink isn't rendered.

As shown in the options i console log the data in [INLINES.HYPERLINK] which is shown here enter image description here

So I'm certain that the data is correct. I just can't figure out why nothing is rendering. I tried rendering {children[0]} for array type and just {children} for non array types.

I also logged the raw info from the rich text which is shown here: enter image description here

Here is the contentful richtext component: enter image description here

Solution

  • The problem was my handling of paragraphs. It works when replacing [BLOCKS.PARAGRAPH] to

    [BLOCKS.PARAGRAPH]: (node, children) => <Paragraph>{children}</Paragraph>,