[FIXED] How to fix problem of same keys in same element using twice?

Issue

I have a component which I use twice: so React read its keys as a same value:

App.tsx

<>
    <Module/>
    <Module/>
</>

Module.tsx

{props.advantages.map((i, idx) =>
    <div key={idx}>
        {i}
    </div>
)}

Solution

Currently I'm learning React Native but this is my alternative:

App.tsx

 <>
    <Module type="not"/>
    <Module type="the-best"/>
    <Module type="alternative"/>
 </>

Module.tsx

{props.advantages.map((i, idx) =>
    var newKey = `${props.type}-${idx}`
    <div key={newKey}>
        {i}
    </div>
)}

Best regards.

Answered By - Andres Paladines
Answer Checked By - - Candace Johnson (ReactFix Volunteer)