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
This is such a mess to read, Have you considered to give your variables proper names instead of weird abbreviations?
2 Likes
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} />
}
}
@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.
@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?
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.
2 Likes
