title: How do I pass a key value to a ternary operator when using the map() method in a JSX HTML element in React?
body: <p>In my code, there's an array that holds objects that look like this:</p>
  
  <pre><code>[{ name="social", id="social" }]
  </code></pre>
  
  <p>In the return/render part of my functional component, I am attempting to use a map method like this:</p>
  
  <pre><code>{sectionData.map((section) =&gt; (
      &lt;section
          id={section.id}
          className={
          focus.{section.name} === 0
            ? "colors main-section transition-1"
            : focus.{section.name} === 1
            ? "colors main-section not-selected transition-1"
            : "colors main-section selected transition-1"
          }
      &gt;
      &lt;/section&gt;))}
  </code></pre>
  
  <p>Attempting to pass {section.name} within the curly braces of className returns an error. I assume this is because I'm nesting one set of curly braces within another. How can I pass key values (i.e. {section.name}) to the ternary operator within className?</p>