I’m trying to render the percentage the same as the index
my code
let date = [
{ start_date: '22-2-2022', end_date: '28-2-2022' },
{ start_date: '1-3-2022', end_date: '31-3-2022' },
{ start_date: '1-4-2022', end_date: '30-4-2022' },
];
let arr = [
{ target_amount: 1000 },
{ target_amount: 2000 },
];
let percentage = 5;
date.map((data, index) => {
return (
<>
Date {index+1} = {data.start_date} - {data.end_date}
{arr.map((trg, idx) => {
return (
<>
{index > 1
? `Tier ${idx + 1} = ${trg.target_amount} + ${percentage}%`
: `Tier ${idx + 1} = ${trg.target_amount}`}
</>
);
})}
</>
);
});
my code output right now like this
Date 1 = 22-2-2022 - 28-2-2022
Tier 1 = 1000
Tier 2 = 2000
Date 2 = 1-3-2022 - 31-3-2022
Tier 1 = 1000 + 5%
Tier 2 = 2000 + 5%
Date 3 = 1-4-2022 - 30-4-2022
Tier 1 = 1000 + 5%
Tier 2 = 2000 + 5%
What I’m expected is something like this, the 5% will add following the index of the date.
I tried to render it but I cant figure it out
Date 1 = 22-2-2022 - 28-2-2022
Tier 1 = 1000
Tier 2 = 2000
Date 2 = 1-3-2022 - 31-3-2022
Tier 1 = 1000 + 5%
Tier 2 = 2000 + 5%
Date 3 = 1-4-2022 - 30-4-2022
Tier 1 = 1000 + 5% + 5%
Tier 2 = 2000 + 5% + 5%
Any help is appreciated, Thank you
>Solution :
date.map((data, index) => {
return (
<>
Date {index + 1} = {data.start_date} - {data.end_date}
{arr.map((trg, idx) => {
let p = "";
for (var i = 0; i < index; i++) {
p += ` + ${percentage}%`;
}
return (
<div>
{index > 0
? `Tier ${idx + 1} = ${trg.target_amount}` + p
: `Tier ${idx + 1} = ${trg.target_amount}`}
</div>
);
})}
</>
);
})