CODEWITHSUNDEEP
htmlcssreactjscontentfulrichtext
Zulzidan.com
Zulzidan.com

Reputation: 456

combine render node on richtext contentful into one div

I want to have more control over how to render rich text, like in this particular case I want to put links and assets into one div, so I can control the style, like making it display flex.

here is the current code :

const Follow = ({ children, node }) => 
  <div className="follow-container">
    {console.log(children)}
    {/* {console.log(children.map((i) => i ))} */}
    {/* <img  src={children.data.target.file.url} alt="nft" className="img"/> */}
    {/* {console.log(node)} */}
    <div>
    {/* {children.map((node) =>
        <li key={node.id} >
          {node}
        </li>
      )} */}
      
    </div>
  </div>

const follow = {
  renderNode: {
    [BLOCKS.PARAGRAPH]: (node, children) => <Follow>{children}</Follow>,
    // [BLOCKS.HYPERLINK]: (node ) => <Follow>{node}</Follow>,
    [BLOCKS.EMBEDDED_ASSET]: (node, children) => <Follow>{node}</Follow>,
  },
}

i commented out, because I got an error.

this the result of console.log(children)

enter image description here

Upvotes: 0

Views: 356

Answers (1)

Salma Alam-Naylor
Salma Alam-Naylor

Reputation: 345

I think you need INLINES.HYPERLINK rather than BLOCKS.HYPERLINK.

Try this:

[INLINES.HYPERLINK]: (node) => <Follow>{node}</Follow>

Make sure to import INLINES from "@contentful/rich-text-types".

Upvotes: 1

Related Questions