Other ways of mapping?

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. :smiley:
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 :smiley:

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


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}) => (
    <dd>{dd.map(item => <p key={item.id}>{item.textOrWhatever}</p>)}</dd>

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

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

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

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.

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?

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.


Okay thanks. :smiley: