Render values from array of objects which contains an object (React, Typescript)

Question

I'm trying to print, for example, the Names on some in my TSX. Data has this form:

const targets: {
    [key: string]: {
        [key: string]: string[]
    }
}[] = [
    {
        '0665496f-7a4e-46b6-a922-2d42ce205c03': {
            names: ['Hello', 'World'],
            dob: ['1971-09-01'],
        },
    },
    {
        '2679d2b8-9c25-44e3-bfad-3e2ef6b93b94': {
            names: ['Jordan'],
        },
    },
    {
        '8a8b7630-5bc8-443e-a88d-c1601659b39e': {
            names: ['John Doe'],
        },
    },
]

How can I do it the more efficient way? The code I tried is very complicated, I'm pretty sure I'm doing it wrong...

Here's what I need for output, for example for the first object:

<div>
    <input data-profile-id="0665496f-7a4e-46b6-a922-2d42ce205c03" data-key="names" type="checkbox" />
    <label>Hello</label>
</div>
<div>
    <input data-profile-id="0665496f-7a4e-46b6-a922-2d42ce205c03" data-key="names" type="checkbox" />
    <label>World</label>
</div>

I need this infos in dataset to handle click on those inputs.

Thanks a lot.

Answer 1

For js/ts-only answer you might want to check this out:

 const d = [ { '0665496f-7a4e-46b6-a922-2d42ce205c03': { names: ['Hello', 'World'], dob: ['1971-09-01'], }, }, { '2679d2b8-9c25-44e3-bfad-3e2ef6b93b94': { names: ['Jordan'], }, }, { '8a8b7630-5bc8-443e-a88d-c1601659b39e': { names: ['John Doe'], }, }, ]; const create = (id, txt) => { const d = document.createElement("div"), // creating outer div i = document.createElement("input"), // creating input l = document.createElement("label"); // creating label l.innerText = txt; i.setAttribute("data-profile-id", id); // set data.id i.setAttribute("data-key", "names"); //... i.type = "checkbox"; d.appendChild(i); d.appendChild(l); return d; // return } d.forEach(e => Object.keys(e).forEach(a => e[a].names.forEach(b => document.body.appendChild(create(a, b))))); // loop over array and add to body

 div { border: 1px solid black; margin-top: 20px; }

Answer 2

You can try something like this, target is an array, map it's objects inside, get the key and value of each object.

Use the key to set it in data-profile-id while the value holds another object which contains names and dob . Map the array of names to get all the names inside the array.

targets.map( target => {
  const [key, value] = Object.entries( target )
  return (
    <div>
      {
        value.names?.map( name => 
        <>
          <input data-profile-id={key} data-key="names" type="checkbox" />
          <label>{name}</label>
        </> 
        )
      }
    </div>
  )
} )