How to use @contentful/rich-text-react-renderer - 5 common examples

{job.title}
        

        
      

      
        
          

          {job.body && documentToReactComponents(job.body.json)}

          <button width="240px">
            Apply
          </button>
        

        {/* 
          <button width="{1}">Apply</button>
         */}
      
    
  )
}

if (_.get(node, 'data.target.sys.contentType.sys.id') === 'suggestion') {
        const {
          body,
          suggesterName,
          suggesterPosition,
          suggestionTitle,
          suggesterPhoto,
          linkedIn,
          buttonText,
          redirectLink,
        } = node.data.target.fields;

        return (
          <div>
            <h5>{suggestionTitle}</h5>
            {documentToReactComponents(body)}
            <div>
              {personComponent({
                image: suggesterPhoto,
                name: suggesterName,
                position: suggesterPosition,
                linkedIn,
              })}
              <a rel="noopener noreferrer" href="{redirectLink">
                <button type="button">
                  {buttonText || 'Schedule a call'}
                </button>
              </a></div></div>

const embeddedEntryComponent = ({ type, list }) => (
  <div>
    <div>
      <img src="{`/static/images/${EMBEDDED_ENTRY_ICON_NAMES[type]}.png`}" alt="Bulb icon">
    </div>
    <div>
      <h4>{EMBEDDED_ENTRY_HEADERS[type]}</h4>
      {!!list &amp;&amp; documentToReactComponents(list)}
    </div>
  </div>
);

[BLOCKS.EMBEDDED_ENTRY]: (node) => {
      if (_.get(node, 'data.target.sys.contentType.sys.id') === 'usefulReadings') {
        const { bookList, list } = _.get(node, 'data.target.fields', null);

        return (
          <div>
            <div>
              <img src="/static/images/book_icon.png" alt="Book icon">
            </div>
            <div>
              <h4>useful readings:</h4>
              {(bookList || list) &amp;&amp; documentToReactComponents(bookList || list)}
            </div>
          </div>
        );
      }
      if (_.get(node, 'data.target.sys.contentType.sys.id') === 'mostSuitableFor') {
        const { list } = _.get(node, 'data.target.fields', null);

        return embeddedEntryComponent({ list, type: 'mostSuitableFor' });
      }
      if (_.get(node, 'data.target.sys.contentType.sys.id') === 'helpfulTools') {
        const { list } = _.get(node, 'data.target.fields', null);

        return embeddedEntryComponent({ list, type: 'helpfulTools' });
      }
      if (_.get(node, 'data.target.sys.contentType.sys.id') === 'suggestion') {
        const {

{url && socialMediaShareButtons({ url: this.props.url.asPath })}
            
          

          <article>
            {author &amp;&amp; personComponent(author.fields)}
            <header>
              <h1>{title}</h1>

              {subtitle &amp;&amp; <h2>{subtitle}</h2>}
              {description &amp;&amp; <p>{description}</p>}
              {heroSrc &amp;&amp; imageComponent({ src: heroSrc, title: heroTitle })}
            </header>

            <main>{documentToReactComponents(bodyRich, bodyOptions)}</main>

            <footer>
              {url &amp;&amp; socialMediaShareButtons({ url: this.props.url.asPath })}
              
            </footer>
          </article>

          <footer>
            <div>
              <div>
                <hr>
                <div>
                  {!!relatedPosts.length &amp;&amp; <h3>Check out our articles:</h3>}
                  <a href="/blog">Back to blog</a>
                </div>
                {!!relatedPosts.length &amp;&amp; (</div></div></footer>