Question: I have a ProdSelectArr component. I use this component three times and change parameters three times. In essence, we can say that only the value agility prodSecKey value changes in the parameters and {arr1 arr2 arr3 setValue1 setValue2 setValue3} swap places.

```
<ProdSelectArr
        arr1={prod.color}
        arr2={prod.price}
        arr3={prod.saiz}
        setValue1={setCategColor}
        setValue2={setCategPrice}
        setValue3={setCategSaiz}
        setValueIndex={setIndexImgProd}
        value={categColor}
        headIndex={indexImgProd.headIndex}
        agility={prod.agility[0]}
        prodSecKey={0.1}
      />
       <ProdSelectArr 
        arr1={prod.price}
        arr2={prod.color}
        arr3={prod.saiz} 
        setValue1={setCategPrice}
        setValue2={setCategColor}
        setValue3={setCategSaiz}
        setValueIndex={setIndexImgProd}
        value={categPrice}
        headIndex={indexImgProd.headIndex}
        agility={prod.agility[1]}
        prodSecKey={0.2}
      />
       <ProdSelectArr
        arr3={prod.color}
        arr2={prod.price}
        arr1={prod.saiz}
        setValue3={setCategColor}
        setValue2={setCategPrice}
        setValue1={setCategSaiz}
        setValueIndex={setIndexImgProd}
        value={categSaiz}
        headIndex={indexImgProd.headIndex}
        agility={prod.agility[2]}
        prodSecKey={0.3}
      />

```

How to shorten code with Array methods?

Answer: 
For swapping, use something like this:

```
function getItem(element, index) {
  const elementProps = {
    [`arr${index%3}`]: {prod.color},
    [`arr${(index+1)%3}`]: {prod.price},
    [`arr${(index+2)%3}`]: {prod.saiz},
    [`setValue${index%3}`]={setCategColor}
    [`setValue${(index+1)%3}`]={setCategPrice}
    [`setValue${(index+2)%3}`]={setCategSaiz}
    setValueIndex={setIndexImgProd}
    value={categColor}
    headIndex={indexImgProd.headIndex}
    agility={prod.agility[index]}
    prodSecKey: element/10
  }
  return <ProdSelectArr {...elementProps} />
}

```

Your data:

```
let items = [1, 2, 3]

```

In your JSX render:

```
return <div>
    ...
    {items.map(getItem)}
    ...
</div>

```
I think that what you need here is a HOC aproach and then think in an array based solution:

```
const HocProdSelectArr = (props) => {
    return <ProdSelectArr
        arr1={props.arr1}
        arr2={props.arr2}
        arr3={props.arr3}

        setValue1={setCategColor}
        setValue2={setCategPrice}
        setValue3={setCategSaiz}
        setValueIndex={setIndexImgProd}
        value={categColor}
        headIndex={indexImgProd.headIndex}

        agility={props.agility}
        prodSecKey={props.prodSecKey}
      />
}

<HocProdSelectArr 
        arr1={prod.color}
        arr2={prod.price}
        arr3={prod.saiz}

        agility={prod.agility[0]}
        prodSecKey={0.1}
/>

<HocProdSelectArr 
        arr1={prod.price}
        arr2={prod.color}
        arr3={prod.saiz}

        agility={prod.agility[1]}
        prodSecKey={0.2}
/>

<HocProdSelectArr 
        arr1={prod.saiz}
        arr2={prod.price}
        arr3={prod.color}

        agility={prod.agility[2]}
        prodSecKey={0.3}
/>

```