How can i loop object in useEffect React js

Here is my code! I want loop object in useEffect! I have a task to edit data! so for that I created a state and using useEffect I am taking data and showing values on input fields! but data I want to show that is images!

  const editor = useRef(null);
  const [content, setContent] = useState('');
  const [baseImage, setBaseImage] = useState('');
  const [baseImages, setBaseImages] = useState([]);

  // console.log('multiple images', baseImages);

  const [titleValue, setTitleValue] = useState('');
  console.log('title', titleValue);
  const [shortDesc, setShortDesc] = useState('');
  const [getCategory, setGetCategory] = useState([]);
  const [getSubCategory, setSubGetCategory] = useState([]);
  const [editValues, setEditValues] = useState([]);


useEffect(() => {
    const fetchData = async () => {
      try {
        const res = await axios.get(
          `${process.env.REACT_APP_API_URL}/article/${resultsId}`
        );
        setEditValues(res.data);
        setTitleValue(res.data.article.title);
        setShortDesc(res.data.article.shortDesc);
        setContent(res.data.article.content);
        setGetCategoryId(res.data.article.category_id);
        setGetSubCategoryId(res.data.article.subCategory_id);
        setBaseImage(
          `${process.env.REACT_APP_API_URL}` + res.data.article.image
        );
        // setBaseImages(res.data.slider);

        // for (let slide in setBaseImages(res.data.slider)) {
        //   `${process.env.REACT_APP_API_URL}` + slide.image;
        // }

     
      } catch (err) {}
    };
    fetchData();
  }, [resultsId]);

and here is the JSON that I am taking! Here I need to loop these sliders and put them on setBaseImages value! and afterward, display them on the input field for editing their data!

{article: {…}, slider: {…}}
article: {publication: "2021-04-28T17:47:18.605Z", rating: 0, _id: "60899fd57d49581056094f91", title: "chax ", author_id: "60749394a467242d21282700", …}
slider:
60899fd57d49581056094f92: {_id: "60899fd57d49581056094f92", image: "/uploads/slider/1619632085654.jpeg", article: "60899fd57d49581056094f91", __v: 0}
60899fd57d49581056094f93: {_id: "60899fd57d49581056094f93", image: "/uploads/slider/1619632085669.jpeg", article: "60899fd57d49581056094f91", __v: 0}
60899fd57d49581056094f94: {_id: "60899fd57d49581056094f94", image: "/uploads/slider/1619632085696.jpeg", article: "60899fd57d49581056094f91", __v: 0}
60899fd57d49581056094f95: {_id: "60899fd57d49581056094f95", image: "/uploads/slider/1619632085756.jpeg", article: "60899fd57d49581056094f91", __v: 0}

here is the input field:

 <input
            type='file'
            onChange={(e) => {
              uploadImages(e);
            }}
            multiple
          />

Answer

What’s the problem? You can just run a normal loop in useEffect – There’s nothing different about looping in that hook that’s different from normal JS.

It looks like the only thing you’re doing wrong is just setting a value and not doing anything with it.

${process.env.REACT_APP_API_URL} + res.data.article.image just concatenates two strings, does nothing with it, and then throws it away when you leave the loop. Do you want to maybe push something into an array?

const res = {
    article: {},
    slider: [
        {"60899fd57d49581056094f92": {_id: "60899fd57d49581056094f92", image: "/uploads/slider/1619632085654.jpeg", article: "60899fd57d49581056094f91", __v: 0}},
        {"60899fd57d49581056094f93": {_id: "60899fd57d49581056094f93", image: "/uploads/slider/1619632085669.jpeg", article: "60899fd57d49581056094f91", __v: 0}},
        {"60899fd57d49581056094f94": {_id: "60899fd57d49581056094f94", image: "/uploads/slider/1619632085696.jpeg", article: "60899fd57d49581056094f91", __v: 0}},
        {"60899fd57d49581056094f95": {_id: "60899fd57d49581056094f95", image: "/uploads/slider/1619632085756.jpeg", article: "60899fd57d49581056094f91", __v: 0}}
    ]
}

for (slide of res.slider) {
  let key = Object.keys(slide)[0]
  console.log(slide[key].image);
}