chore: Fix ESLint warnings (#10968)

## Description

Some packages throw aslant warnings and this PR resolve them.

## Related Issues

Fixes #10943

Author: markusguenther

examples/image-processing/src/pages/index.js

@@ -208,7 +208,7 @@ class Index extends React.Component {
           and a{` `}
           <code>base64</code>
           {` `}
-          image to use as a placeholder) you need to implement the "blur up"
+          image to use as a placeholder) you need to implement the {`"blur up"`}
           technique popularized by
           {` `}
           <a href="https://jmperezperez.com/medium-image-progressive-loading-placeholder/">
@@ -247,16 +247,17 @@ class Index extends React.Component {
 
         <p>
           The <code>toFormat</code> option lets you convert the source image to
-          another image format. We use "PNG" here to ensure that the duotoned
-          image does not show any JPG artifacts.
+          another image format. We use {`"PNG"`} here to ensure that the
+          duotoned image does not show any JPG artifacts.
         </p>
 
         <h3>
           <small>
             fluid(duotone:
             {` `}
             {`{ `}
-            highlight: "#f00e2e", shadow: "#192550" {`}`}, toFormat: PNG)
+            highlight: {`"#f00e2e"`}, shadow: {`"#192550"`} {`}`}, toFormat:
+            PNG)
           </small>
         </h3>
 
@@ -267,7 +268,7 @@ class Index extends React.Component {
             fluid(duotone:
             {` `}
             {`{ `}
-            highlight: "#0ec4f1", shadow: "#192550", opacity: 50 {`}`})
+            highlight: {`"#0ec4f1"`}, shadow: {`"#192550"`}, opacity: 50 {`}`})
           </small>
         </h3>
 

examples/using-contentful/src/pages/image-api.js

@@ -13,7 +13,7 @@ const ImageAPI = props => {
         Gatsby offers rich integration with
         {` `}
         <a href="https://www.contentful.com/developers/docs/references/images-api/">
-          Contentful's Image API
+          {`Contentful's Image API`}
         </a>
       </p>
       <p>
@@ -62,11 +62,11 @@ const ImageAPI = props => {
       <p>
         If you make queries with <code>fixed</code> then Gatsby automatically
         generates images with 1x, 1.5x, 2x, and 3x versions so your images look
-        great on whatever screen resolution of device they're on.
+        great on whatever screen resolution of device {`they're`} on.
       </p>
       <p>
-        If you're on a retina class screen, notice how much sharper these images
-        are than the above "resized" images.
+        If {`you're`} on a retina class screen, notice how much sharper these
+        images are than the above {`"resized"`} images.
       </p>
       <p>
         You should prefer this operator over <code>resize</code>.
@@ -225,8 +225,8 @@ const ImageAPI = props => {
         WebP is currently only supported in
         {` `}
         <a href="https://caniuse.com/#feat=webp">Chrome and Oprah browsers</a>,
-        and you'll want to fall back to another format for other clients. When
-        this query is used with
+        and {`you'll`} want to fall back to another format for other clients.
+        When this query is used with
         {` `}
         <a href="https://www.gatsbyjs.org/packages/gatsby-image/">
           <code>gatsby-image</code>

examples/using-contentful/src/pages/index.js

@@ -42,16 +42,16 @@ class IndexPage extends React.Component {
     return (
       <Layout>
         <div style={{ marginBottom: rhythm(2) }}>
-          <h2>Gatsby's integration with the Contentful Image API</h2>
+          <h2>{`Gatsby's`} integration with the Contentful Image API</h2>
           <Link to="/image-api/">See examples</Link>
           <br />
           <br />
           <br />
           <h2>Localization</h2>
           <p>
             The <code>gatsby-source-contentful</code> plugin offers full support
-            for Contentful's localization features. Our sample space includes
-            products localized into both English and German.
+            for {`Contentful's`} localization features. Our sample space
+            includes products localized into both English and German.
           </p>
           <p>
             An entry and asset node are created for each locale following

examples/using-css-modules/src/pages/index.js

@@ -9,7 +9,8 @@ class IndexComponent extends React.Component {
       <div className={indexStyles.index}>
         <h1>Hello world</h1>
         <h2 className={indexStyles.subheader}>
-          You've arrived at the world renowned css modules & gatsby example site
+          {`You've`} arrived at the world renowned css modules & gatsby example
+          site
         </h2>
         <p>
           <Link className={indexStyles.link} to="/another-page/">

examples/using-drupal/src/pages/index.js

@@ -131,6 +131,7 @@ class IndexPage extends React.Component {
                   square={true}
                   columns={4}
                   marginBottom={0}
+                  key={recipe.fields.slug}
                 />
               ))}
             </div>
@@ -147,7 +148,7 @@ class IndexPage extends React.Component {
               }}
             >
               <div css={{ maxWidth: rhythm(15) }}>
-                <h2>In this month's edition</h2>
+                <h2>In this {`month's`} edition</h2>
                 <p>
                   Quisque vitae pulvinar arcu. Aliquam ac pellentesque erat, at
                   finibus massa.
@@ -186,7 +187,11 @@ class IndexPage extends React.Component {
               }}
             >
               {nextFourPromotedRecipes.map(recipe => (
-                <PromotedCard recipe={recipe} columns={2} />
+                <PromotedCard
+                  recipe={recipe}
+                  columns={2}
+                  key={recipe.fields.slug}
+                />
               ))}
             </div>
           </Container>

examples/using-drupal/src/pages/recipes.js

@@ -10,7 +10,7 @@ const AllRecipes = ({ data }) => (
       <h1>Recipes</h1>
       <ul>
         {data.allRecipes.edges.map(({ node }) => (
-          <li>
+          <li key={node.fields.slug}>
             <Link to={node.fields.slug}>{node.title}</Link>
           </li>
         ))}

examples/using-drupal/src/templates/recipe.js

@@ -53,20 +53,24 @@ const RecipeTemplate = ({ data }) => (
           </div>
         </div>
         <div css={{ background: `white`, padding: rhythm(1.5) }}>
-          <h2>What you'll need and how to make this dish</h2>
+          <h2>What {`you'll`} need and how to make this dish</h2>
           <div css={{ display: `flex`, justifyContent: `space-between` }}>
             <div css={{ width: `calc(1/2*100% - (1 - 1/2) * ${rhythm(1.5)})` }}>
               <h3>Ingredients</h3>
               <ul>
                 {data.recipes.ingredients &&
-                  data.recipes.ingredients.map(ing => <li>{ing}</li>)}
+                  data.recipes.ingredients.map((ing, index) => (
+                    <li key={index}>{ing}</li>
+                  ))}
               </ul>
             </div>
             <div css={{ width: `calc(1/2*100% - (1 - 1/2) * ${rhythm(1.5)})` }}>
               <h3>Method</h3>
               <ul>
                 {data.recipes.instructions &&
-                  data.recipes.instructions.split(`,`).map(i => <li>{i}</li>)}
+                  data.recipes.instructions
+                    .split(`,`)
+                    .map(i => <li key={i}>{i}</li>)}
               </ul>
             </div>
           </div>

examples/using-redirects/src/pages/index.js

@@ -53,7 +53,7 @@ const IndexPage = () => (
         to apply the <code>selected</code>
         &nbsp;class to links that match to the active path, and
         {` `}
-        <code>import './selected.css'</code>
+        <code>import {`'./selected.css'`}</code>
         &nbsp;in <code>/src/layouts/index.js</code>
         &nbsp;makes the <code>.selected {`{ color: #396; }`}</code> &nbsp;style
         declaration globally available to both&nbsp;pages.

packages/gatsby/cache-dir/static-entry.js

@@ -52,7 +52,11 @@ const createElement = React.createElement
 export default (pagePath, callback) => {
   let bodyHtml = ``
   let headComponents = [
-    <meta name="generator" content={`Gatsby ${gatsbyVersion}`} />,
+    <meta
+      name="generator"
+      content={`Gatsby ${gatsbyVersion}`}
+      key={`generator-${gatsbyVersion}`}
+    />,
   ]
   let htmlAttributes = {}
   let bodyAttributes = {}

www/src/components/evaluation-table.js

@@ -28,6 +28,7 @@ class EvaluationTable extends Component {
               background: colors.ui.bright,
             },
           }}
+          key={`info-icon-${words[words.length - 1]}`}
         >
           {` `}
           {`${words[words.length - 1]} `}
@@ -114,17 +115,21 @@ class EvaluationTable extends Component {
           {flatten(
             sections.map((section, s) =>
               [
-                <SectionTitle text={sectionHeaders[s]} />,
-                <SectionHeaderTop />,
+                <SectionTitle
+                  text={sectionHeaders[s]}
+                  key={`section-title-${s}`}
+                />,
+                <SectionHeaderTop key={`section-header-${s}`} />,
               ].concat(
                 flatten(
                   section.map((row, i) =>
                     [].concat([
                       <SectionHeaderBottom
                         display={row.node.Subcategory}
                         category={row.node.Subcategory}
+                        key={`section-header-bottom-${i}`}
                       />,
-                      <tr>
+                      <tr key={`first-row-${i}`}>
                         {headers.map((header, j) => (
                           <td
                             key={j}
@@ -165,6 +170,7 @@ class EvaluationTable extends Component {
                         style={{
                           display: showTooltip(s, i) ? `table-row` : `none`,
                         }}
+                        key={`second-row-${i}`}
                       >
                         <td
                           css={{