Unable to conditionally render child components

[dan-fein]

Describe the bug I understand this has been touched on in the past, but it's still occurring in .13.

When generating content and rendering it via {variableName}, the content does not render and yields: ** **

To Reproduce Steps to reproduce the behavior:

<JSONLD>
              <Generic type="thing" jsonldtype="Thing" schema={{ url: link, image, description: overview, name }} />
              {products}
</JSONLD>

where products is an array generated like:

var products = []
for(var i = 0; i < itemCount; i++){
      let product = (<Product>
            <AggregateRating ratingCount={ratingCount} bestRating={bestRating} worstRating={worstRating} ratingValue={ratingValue} reviewCount={reviewCount}  />
      </Product>)
      products.push(product)
}

Expected behavior This should render out all of the <Product> components.

Desktop (please complete the following information):

• OS: MacOS
• Browser Chrome
• Version 75

Additional context I did notice a few tickets from February saying this was handled, the bug has resurfaced.

[buzjuka]

Hi use separate <JSONLD> for each product

Describe the bug I understand this has been touched on in the past, but it's still occurring in .13.

When generating content and rendering it via {variableName}, the content does not render and yields: ** **

To Reproduce Steps to reproduce the behavior:

<JSONLD>
              <Generic type="thing" jsonldtype="Thing" schema={{ url: link, image, description: overview, name }} />
              {products}
</JSONLD>

where products is an array generated like:

var products = []
for(var i = 0; i < itemCount; i++){
      let product = (<Product>
            <AggregateRating ratingCount={ratingCount} bestRating={bestRating} worstRating={worstRating} ratingValue={ratingValue} reviewCount={reviewCount}  />
      </Product>)
      products.push(product)
}

Expected behavior This should render out all of the components.

Desktop (please complete the following information):

• OS: MacOS
• Browser Chrome
• Version 75

Additional context I did notice a few tickets from February saying this was handled, the bug has resurfaced.

[dan-fein]

sorry i don't understand, what do you mean use separate? Use separate what?

[JaapWeijland]

I am having this issue as well:

TypeError: Cannot read property 'children' of undefined

<JSONLD>
    <Generic type="event" jsonldtype="Event" schema={{
                name,
                eventAttendanceMode: "https://schema.org/OfflineEventAttendanceMode",
                eventStatus: "https://schema.org/EventScheduled",
                description,
                startDate: moment(startDateMS).format("YYYY-MM-DD[T]HH:mm:ss"),
                endDate: moment(endDateMS).format("YYYY-MM-DD[T]HH:mm:ss")
            }}>
                {
                    items.map(({ name, price }) => {
                        return (
                            <Generic type="offers" jsonldtype="Offer" schema={{
                                name,
                                url: "https://shop.klappert.nl/s/" + slug,
                                price,
                                priceCurrency: "EUR",
                            }} />
                        )
                    })
                }
                <Generic type="location" jsonldtype="Place" schema={{ address: postalCode, name: location }} />
            </Generic>
        </JSONLD>

[Majrons]

I am having this issue as well:

TypeError: Cannot read property 'children' of undefined

<JSONLD>
    <Generic type="event" jsonldtype="Event" schema={{
                name,
                eventAttendanceMode: "https://schema.org/OfflineEventAttendanceMode",
                eventStatus: "https://schema.org/EventScheduled",
                description,
                startDate: moment(startDateMS).format("YYYY-MM-DD[T]HH:mm:ss"),
                endDate: moment(endDateMS).format("YYYY-MM-DD[T]HH:mm:ss")
            }}>
                {
                    items.map(({ name, price }) => {
                        return (
                            <Generic type="offers" jsonldtype="Offer" schema={{
                                name,
                                url: "https://shop.klappert.nl/s/" + slug,
                                price,
                                priceCurrency: "EUR",
                            }} />
                        )
                    })
                }
                <Generic type="location" jsonldtype="Place" schema={{ address: postalCode, name: location }} />
            </Generic>
        </JSONLD>

yes it is weird you have to wrap this condition in another generic collection

<GenericCollection>
{
                    items.map(({ name, price }) => {
                        return (
                            <Generic type="offers" jsonldtype="Offer" schema={{
                                name,
                                url: "https://shop.klappert.nl/s/" + slug,
                                price,
                                priceCurrency: "EUR",
                            }} />
                        )
                    })
                }
</GenericCollection>

and this is problem because in console i have warning: Invalid prop 'jsonldtype' of type 'array' supplied to 'ChildNode', expected 'string'