Other ways of mapping?

[mohamedeliwa]

Hello,
I’m building a react project when I need to map an array of objects to create jsx.
Also each child object of this array have an array of objects needed to be mapped also.
I’m providing a unique key for parent elements but I don’t want to provide unique keys for children too.
So I’m trying to do mapping by any method other than map() but till now I couldn’t.
This is how my objects structure look like, the folded objects are the same as the unfolded one.

And this is what I’m trying to do:

Any Help please

[arigoru]

This is such a mess to read, Have you considered to give your variables proper names instead of weird abbreviations?

[DanCouper]

Yes, needs better names I think, use names that actually describe what the things are (index of what? and the dt is a title and the dd is a description, dt/dd are just HTML tags, not what the stuff actually is). but anyway

const Definition = ({dt, dd}) => (
  <React.Fragment>
    <dt>{dt}</dt>
    <dd>{dd.map(item => <p key={item.id}>{item.textOrWhatever}</p>)}</dd>
  </React.Fragment>
);

const Definitions = ({index}) => (
  <dl>
    {
      index.map({id, dt, dd}) => (
        <Definition key={id} dt={dt} dd={dd} />
      )
    }
  <dl>
);

class SomeComponent extends React.Component {
  state = {
    index: [
      // your stuff here
    ]
  }

  render() {
    <Definitions index={this.state.index} />
  }
}

[mohamedeliwa]

@arigoru
Sorry I didn’t explain the meaning of these variables
I’m building a website for a book and the index is the index of it.
dt & dd are referring to <dt> <dd> themselves, they aren’t abbreviations.

[mohamedeliwa]

@DanCouper
Thanks for the code, but still need to use key=" ".
Is there any way making it possible not to use it?
As I’m already passing unique key to the parent <dl> . is there anyway to avoid passing key="" value to its children?

[DanCouper]

You have an array of elements you want to render, you need to use key otherwise React will throw warnings: it needs the key to help it render efficiently.

[mohamedeliwa]

Okay thanks.