Mapping through array with jsx syntax-CodePudding

I am having trouble with mapping through an array so i can add the reviews to the review structured data, the JSX is not valid. i wonder if it's the perfect way or i need to do this in a function before calling it!

<MetaTags>
    { this.state.name ? (
        <script type="application/ld json">
        {`
            {
                "@context": "https://schema.org/",
                "@type": "LocalBusiness",
                "aggregateRating": {
                "@type": "AggregateRating",
                    "ratingValue": "${this.state.rating}",
                    "ratingCount": "${this.state.voters}"
                },
                "review": [
                    {
                        "@type": "Review",
                        "author": "Ellie",
                        "datePublished": "2011-04-01",
                        "reviewBody": "The lamp burned out and now I have to replace it.",
                        "name": "Not a happy camper",
                        "reviewRating": {
                          "@type": "Rating",
                          "bestRating": "5",
                          "ratingValue": "1",
                          "worstRating": "1"
                        }
                    },
                    {
                        "@type": "Review",
                        "author": "Ellie",
                        "datePublished": "2011-04-01",
                        "reviewBody": "The lamp burned out and now I have to replace it.",
                        "name": "Not a happy camper",
                        "reviewRating": {
                          "@type": "Rating",
                          "bestRating": "5",
                          "ratingValue": "1",
                          "worstRating": "1"
                        }
                    }
                ]
            }
        `}
        </script>
    ) : ''}
</MetaTags>

i have tried to wrapp the map function with {``}

"review": [
    {` 
        this.state.posts ? this.state.posts.slice(0, 10).map(data => (
            {
                "@type": "Review",
                "author": "Ellie",
                "datePublished": "2011-04-01",
                "reviewBody": "The lamp burned out and now I have to replace it.",
                "name": "Not a happy camper",
                "reviewRating": {
                    "@type": "Rating",
                    "bestRating": "5",
                    "ratingValue": "1",
                    "worstRating": "1"
                }
            },
        )) : '';
    `}
]

CodePudding user response：

"review": this.state.posts ? this.state.posts.slice(0, 10).map(data => ({
  "@type": "Review",
  "author": "Ellie",
  "datePublished": "2011-04-01",
  "reviewBody": "The lamp burned out and now I have to replace it.",
  "name": "Not a happy camper",
  "reviewRating": {
    "@type": "Rating",
    "bestRating": "5",
    "ratingValue": "1",
    "worstRating": "1"
  }
})) : []

<MetaTags>
  {this.state.name ? (
    <script type="application/ld json">
      {`
            {
                "@context": "https://schema.org/",
                "@type": "LocalBusiness",
                "aggregateRating": {
                "@type": "AggregateRating",
                    "ratingValue": "${this.state.rating}",
                    "ratingCount": "${this.state.voters}"
                },
                "review": ${
                  this.state.posts
                    ? this.state.posts.slice(0, 10).map((data) => ({
                        "@type": "Review",
                        author: "Ellie",
                        datePublished: "2011-04-01",
                        reviewBody:
                          "The lamp burned out and now I have to replace it.",
                        name: "Not a happy camper",
                        reviewRating: {
                          "@type": "Rating",
                          bestRating: "5",
                          ratingValue: "1",
                          worstRating: "1",
                        },
                      }))
                    : []
                }
            }
        `}
    </script>
  ) : (
    ""
  )}
</MetaTags>;