0

In my code, there's an array that holds objects that look like this:

[{ name="social", id="social" }]

In the return/render part of my functional component, I am attempting to use a map method like this:

{sectionData.map((section) => (
    <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"
        }
    >
    </section>))}

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?

liamdavis
  • 25
  • 1
  • 1
  • 8
  • 1
    `focus.{section.name}` is invalid syntax. See the linked question's answers, you probably want `focus[section.name]`. I'd also factor out the common parts of that, e.g. ```className={`colors main-section transition-1 ${focus[section.name] === 0 ? "" : focus[section.name] === 1 ? "not-selected" : "selected"}`}``` (although I avoid nested conditionals, particularly buried in expressions, so I'd use a long-form arrow function and do that bit up front). – T.J. Crowder Apr 14 '20 at 11:47
  • 1
    I hope your focus object is an array instead of a JSON. For that reason this gives an error because of wrong syntax to access array elements. Use `focus[section.name]` instead. – wr93_ Apr 14 '20 at 12:01

0 Answers0