Error when trying to render data conditionally in React - reactjs

Question

I am querying data from a CMS via Graphql into my Gatsby project.
Sadly I was not thinking ahead and the content types text field wasn't set to required or given a default value, so now the value of this text field is for some elements null.
I tried avoiding this giving me issues by rendering the elements through a conditional statement checking if the element is empty or not.
This is my entire file:
import React from 'react'
import { graphql, Link } from 'gatsby'
import { GatsbyImage, getImage } from "gatsby-plugin-image"
import Layout from '../components/Layout'
import { MDXProvider } from "#mdx-js/react"
import MDXRenderer from "gatsby-plugin-mdx/mdx-renderer"
export default function MalreiTemplate({ data }) {
const picture = data.allContentfulMalerei.nodes
return (
<Layout>
{picture.map(pic => {
const image = getImage(pic.image)
return(
<div key={pic.slug} className="mb-3">
<div className="pt-3 d-flex justify-content-between">
<span><Link to="/malerei" style={{textDecoration: "none", color: "#589AAD"}}>← zurück</Link></span>
</div>
<hr />
<div className="artwork-detail-container d-flex">
<div className="artwork-detail-image-container">
<GatsbyImage image={image}/>
</div>
<div className="artwork-detail-text">
<h3>{pic.title}, {pic.year}</h3>
<h4>{pic.type}</h4>
<p className="pt-4">
<MDXProvider>
<MDXRenderer>
{pic.description !== null ? <p>{pic.description}</p> : <p>.</p>}
</MDXRenderer>
</MDXProvider>
</p>
</div>
</div>
<hr/>
</div>
)})}
</Layout>
)
}
export const query = graphql`
query($slug: String!) {
allContentfulMalerei(filter: { slug: { eq: $slug } }) {
nodes {
year
width
title
description {
childMdx {
body
}
}
image {
gatsbyImageData(width: 600, placeholder: BLURRED)
}
}
}
}
`
This is the relevant part:
<MDXProvider>
<MDXRenderer>
{pic.description ? pic.description.childMdx.body : <p>.</p>}
</MDXRenderer>
</MDXProvider>
I am getting this error message in return when I visit pages for those elements that have no text field. On all other sites I can see the content with no error.
Would someone have an idea on how to fix this? Thanks in advance.

Answer 1

Personally I would replace:
<p className="pt-4">
<MDXProvider>
<MDXRenderer>
{pic.description ? <p>{pic.description.childMdx.body}</p> : <p>.</p>}
</MDXRenderer>
</MDXProvider>
</p>
with:
{ picDescription ? (<p className="pt-4">{pic.description}</p>) : null }
because I don't see what value the MDX components are adding there and I suspect that error is coming from MDX (but I don't know for sure).