I have the following 3 list items. Each of them uses the same component but different calculations:
<ListItem title={'Product 1'} tag={tag} calculatedVal={getCalculatedVal(props.data.price1, props.data.price2)}
isMore={props.data.price1 >= props.data.price2}
handleClick={open}
/>
<Underline />
<ListItem title={'Product 2'} tag={tag} calculatedVal={getCalculatedVal(props.data.price1, props.data.price3)}
isMore={props.data.price1 >= props.data.price3}
handleClick={open}
/>
<Underline/>
<ListItem title={'Product 3'} tag={tag} calculatedVal={getCalculatedVal(props.data.price1, props.data.price4)}
isMore={props.data.price1 >= props.data.price4}
handleClick={open}
/>
How can be this converted into 1 component with the loop?
It's not clear from your code where tag, getCalculatedValue, color, etc. are declared.
But here's a basic approach. Move your list item props into an array and use a map to render each list item.
import ListItem from "./somewhere/ListItem";
import Underline from "./somewhere/Underline";
import { getCalculatedVal } from "./somewhere/getCalculatedVal";
const PRICES = ["price2", "price3", "price4"];
export const MyComponent = ({ data, ...props }) => {
const listItems = PRICES.map((price) => {
return {
calculatedVal: getCalculatedVal(data.price1, data[price]),
isMore: data.price1 >= data[price],
key: price,
};
});
return listItems.map((listItemProps) => {
return (
<>
<Underline color={props.color} />
<ListItem
title={"Product 1"}
tag={props.tag}
handleClick={props.open}
{...listItemProps}
/>
</>
);
});
};