Tengo los siguientes 3 elementos de la lista. Cada uno de ellos utiliza el mismo componente pero diferentes cálculos:
<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} />¿Cómo se puede convertir esto en 1 componente con el bucle?
No está claro en su código dónde se declaran tag , getCalculatedValue , color , etc.
Pero he aquí un enfoque básico. Mueva los elementos de su lista a una matriz y use un mapa para representar cada elemento de la lista.
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} /> </> ); }); };