How to map a nested data object in React?

Question

How would I further access the "name" and "description" from this object array? For example my goal is to render two buttons that say Term 1 and Term 2? I will have 3 slides each with different terms/definitions. So i thought about making a component, where I can pass down an index via props that refers to the set of terms to render. So each slide will show a different set of term names and definitions.

const TermData = [
  {
    index: 1,
    slideTitle: "Key Terms (1 of 3)",
    terms: [
      {
        name: "Term 1",
        definition: "Definition 1",
      },
      {
        name: "Term 2 ",
        definition: " definition 2",
      },
    ],
  },
  {
    index: 2,
    slideTitle: "Key Terms (2 of 3)",
    terms: [
      {
        name: "Term 1",
        definition: "Definition 1",
      },
      {
        name: "Term 2 ",
        definition: " definition 2",
      },
    ],
  },
];

//MAP THROUGH THE DATA - RENDER THE BUTTONS WITH TERM1 and TERM2 TITLE//
  const termSet = TermData.map((set, index) => {
    return (
      <>
        <button className="terms-button" key={index} onClick={() => handleClick(index)}>
          {set.terms[0].name}
        </button>
      </>
    );
  });

return (
    <Fragment>
        <div>
        {termSet}
        </div>
    </Fragment>
  );

RABI · Accepted Answer · 2021-08-05 13:52:06Z

1

You have to change the following method as

//MAP THROUGH THE DATA - RENDER THE BUTTONS WITH TERM1 and TERM2 TITLE//
  const termSet = TermData[0].terms.map((set, index) => {
  return (
    <>
      <button className="terms-button" key={index}>
        {set.name}
      </button>
    </>
  );
});

Codesandbox here

answered Aug 5, 2021 at 13:52

RABI

7324 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to map a nested data object in React?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related