Why is the data not updated with useState when I do a map on another array of object?

Question

I'm trying to build a website and I'm building it with React-Redux. I have (API) which is a (Data Array of Object) and its length is (16 elements). And fetch the data through Axios and save it in the (reducer ) and fetch the data to the required component through (UseSelect), and the data comes to me correctly as I want. Then I try, through (UseEffect), to extract the image link from the data and put it in a new (state), but when I do a map on it, it does not extract the data correctly.

What is my error and what is the solution?

API DATA

[
    {
        "id":1,
        "name":"Esprit Ruffle Shirt",
        "supplier":"Esprit Ruffle Shirt",
        "price":"16.64 $",
        "Size":["Size s","Sizes M","Size L","Size XL"],
        "color":["Red","Blue","White"],
        "img":"images/product-01.jpg",
        "category":"women"
    },
    {
        "id":2,
        "name":"Herschel supply",
        "supplier":"Herschel supply",
        "price":"35.64 $",
        "Size":["Size s","Sizes M","Size L","Size XL"],
        "color":["Red","Blue","Grey","White"],
        "img":"images/product-02.jpg",
        "category":"women"
         
    },
    {
        "id":3,
        "name":"Only Check Trouser",
        "supplier":"Esprit Ruffle Shirt",
        "price":"16.64 $",
        "Size":["Size s","Sizes M","Size L","Size XL"],
        "color":["Red","Blue","White"],
        "img":"images/product-03.jpg",
        "category":"men"
    },
    {
        "id":4,
        "name":"Classic Trench Coat",
        "supplier":"Esprit Ruffle Shirt",
        "price":"16.64 $",
        "Size":["Size s","Sizes M","Size L","Size XL"],
        "color":["Red","Blue","Grey","White"],
        "img":"images/product-04.jpg",
        "category":"women"
    },
    {
        "id":5,
        "name":"Front Pocket Jumper",
        "supplier":"Esprit Ruffle Shirt",
        "price":"16.64 $",
        "Size":["Size s","Sizes M","Size L","Size XL"],
        "color":["Red","Blue","Grey","White"],
        "img":"images/product-05.jpg",
        "category":"women"},   
     {
        "id":6,
        "name":"Herschel supply",
        "supplier":"Esprit Ruffle Shirt",
        "price":"16.64 $",
        "Size":["Size s","Sizes M","Size L","Size XL"],
        "color":["Red","Blue","Grey","White"],
        "img":"images/product-06.jpg",
        "category":"accessories"
    },
    {
        "id":7,
        "name":"Femme T-Shirt In Stripe",
        "supplier":"Esprit Ruffle Shirt",
        "price":"76.64 $",
        "Size":["Size s","Sizes M","Size L","Size XL"],
        "color":["Red","Blue","Grey","White"],
        "img":"images/product-07.jpg",
        "category":"women"
    },
    {
        "id":8,
        "name":"T-Shirt with Sleeve",
        "supplier":"Esprit Ruffle Shirt",
        "price":"16.64 $",
        "Size":["Size s","Sizes M","Size L","Size XL"],
        "color":["Red","Blue","Grey","White"],
        "img":"images/product-08.jpg",
        "category":"women"
    },
    {
        "id":9,
        "name":"Pretty Little Thing",
        "supplier":"Esprit Ruffle Shirt",
        "price":"96.64 $",
        "Size":["Size s","Sizes M","Size L","Size XL"],
        "color":["Red","Blue","Grey","White"],
        "img":"images/product-09.jpg",
        "category":"accessories"
    },
    {
        "id":10,
        "name":"Square Neck Back",
        "supplier":"Herschel supply",
        "price":"35.64 $",
        "Size":["Size s","Sizes M","Size L","Size XL"],
        "color":["Red","Blue","Grey","White"],
        "img":"images/product-10.jpg",
        "category":"women"
         
    },
    {
        "id":11,
        "name":"Lightweight Jacket",
        "supplier":"Esprit Ruffle Shirt",
        "price":"16.64 $",
        "Size":["Size s","Sizes M","Size L","Size XL"],
        "color":["Red","Blue","Grey","White"],
        "img":"images/product-11.jpg",
        "category":"men"
    },
    {
        "id":12,
        "name":"Lightweight Jacket",
        "supplier":"Esprit Ruffle Shirt",
        "price":"16.61 $",
        "Size":["Size s","Sizes M","Size L","Size XL"],
        "color":["Red","Blue","Grey","White"],
        "img":"images/product-12.jpg",
        "category":"accessories"
    },
    {
        "id":13,
        "name":"Lightweight Jacket",
        "supplier":"Esprit Ruffle Shirt",
        "price":"16.64 $",
        "Size":["Size s","Sizes M","Size L","Size XL"],
        "color":["Red","Blue","Grey","White"],
        "img":"images/product-13.jpg",
        "category":"women"},   
     {
        "id":14,
        "name":"Lightweight Jacket",
        "supplier":"Esprit Ruffle Shirt",
        "price":"16.64 $",
        "Size":["Size s","Sizes M","Size L","Size XL"],
        "color":["Red","Blue","Grey","White"],
        "img":"images/product-14.jpg",
        "category":"women"
    },
    {
        "id":15,
        "name":"Lightweight Jacket",
        "supplier":"Esprit Ruffle Shirt",
        "price":"76.64 $",
        "Size":["Size s","Sizes M","Size L","Size XL"],
        "color":["Red","Blue","Grey","White"],
        "img":"images/product-15.jpg",
        "category":"accessories"
    },
    {
        "id":16,
        "name":"Lightweight Jacket",
        "supplier":"Esprit Ruffle Shirt",
        "price":"16.64 $",
        "Size":["Size s","Sizes M","Size L","Size XL"],
        "color":["Red","Blue","Grey","White"],
        "img":"images/product-16.jpg",
        "category":"women"
    }
]

my code in component

export  function ShopDetails() {
 
const prodectData=useSelector((state)=>state.productData)
const [option,setOption]=useState("")

console.log(prodectData)///See the result in the picture below // ((Line 25))

    const [image,setImge] = useState([{
}]);


  useEffect(()=>{

      prodectData.map((el)=>(
        setImge([...image,{original:el.img,thumbnail:el.img}])
      
       )
    )

    console.log(image) /// See the result in the picture below  ((line 38))
  
},[prodectData])

    return (
    //Some Codes
 )
}

Answer 1

setImge is for updating image state. If you wanna use the image List as a state. You should do as below.

// example
const productData = useSelector(state => state.productData);
const imageList = productData.map((data => {original: data.img, thumnbnail: original.img})); // you make a img List you want!
const [image, setImage] = useState(imageList);

..... render logic

That's it, You don't need to use useEffect cuz whenever the productData in redux store changes. React re-render all components that use the productData. It means new productData you just fetched will be put image state in useState.