Rendering Images in React after Importing url from a different file-CodePudding

I created a function that returns a new url at random, in a given amount of time from an object. I then tried to export the function so that I am able to consume the url in another React file but It's like it's not working. can anybody help out.

JS FILE

//create a function that will display random images every five or more seconds
const imageObject = {
    one: 'https://static.nike.com/a/images/f_auto/dpr_1.0,cs_srgb/w_1253,c_limit/a6c38705-dd40-43f8-a1ca-9ba62db12896/nike-just-do-it.jpg',
    two: 'https://static.nike.com/a/images/f_auto/dpr_1.0,cs_srgb/w_1253,c_limit/30afe174-1232-4fa5-8bd2-c8d5c4140ea7/nike-just-do-it.jpg',
    three: 'https://static.nike.com/a/images/f_auto/dpr_1.0,cs_srgb/w_1253,c_limit/abdc6ff0-7743-4d16-8022-b006b5b5cd2e/nike-just-do-it.jpg',
    four: 'https://static.nike.com/a/images/f_auto/dpr_1.0,cs_srgb/w_621,c_limit/aa52dbcb-437f-40d7-aba8-485b9166c0da/nike-just-do-it.jpg',
    five: 'https://static.nike.com/a/images/f_auto/dpr_1.0,cs_srgb/w_621,c_limit/35590940-95bc-4360-aaf0-3b4f2b690913/nike-just-do-it.png',
    six: 'https://www.newbalance.com/dw/image/v2/AAGI_PRD/on/demandware.static/-/Library-Sites-NBUS-NBCA/default/dw803b3a09/images/page-designer/2022/october_3/14428_Comp_J5_Image.jpg',
    seven: 'https://www.newbalance.com/dw/image/v2/AAGI_PRD/on/demandware.static/-/Library-Sites-NBUS-NBCA/default/dwc2463d13/images/page-designer/2022/october_3/14430_Comp_E_Image1.jpg?sw=808&sfrm=jpg',
    eight: 'https://www.newbalance.com/dw/image/v2/AAGI_PRD/on/demandware.static/-/Library-Sites-NBUS-NBCA/default/dwe8369510/images/page-designer/2022/october_2/14437_Comp_E1_Image1.jpg?sw=808&sfrm=jpg',
    nine: 'https://media.gucci.com/content/GiantEditorialStandard_1366x1643/1666791903/GiantEditorialStandard_HAHAHA-Harry-Styles_001_Default.jpg',
    ten: 'https://static.nike.com/a/images/f_auto/dpr_1.0,cs_srgb/w_621,c_limit/142b1b85-a20a-46e5-8d4d-8b2c3467d9c3/nike-just-do-it.jpg'
}


const DisplayImages = () => {
    setInterval(() => {
        const myImageArray = Object.keys(imageObject);
        const randomNumber = Math.floor(Math.random() * myImageArray.length);
        const randomImage = myImageArray[randomNumber];
        console.log(imageObject[randomImage]);
    }, 1000);
}

export default DisplayImages;

React file(tried to simplify)

import React from 'react'; import DisplayImages from './images.js';

function Images() { return( ); }

Images are not displaying on the page. What did i do wrong

CodePudding user response：

Just add the

   const myImageArray = ["one", "two" , "three", "four", "five", "six", "seven", "eight", "nine", "ten"]

or try this

const imagesArray
 = [
'https://static.nike.com/a/images/f_auto/dpr_1.0,cs_srgb/w_1253,c_limit/a6c38705-dd40-43f8-a1ca-9ba62db12896/nike-just-do-it.jpg',   
'https://static.nike.com/a/images/f_auto/dpr_1.0,cs_srgb/w_1253,c_limit/30afe174-1232-4fa5-8bd2-c8d5c4140ea7/nike-just-do-it.jpg',
'https://static.nike.com/a/images/f_auto/dpr_1.0,cs_srgb/w_1253,c_limit/abdc6ff0-7743-4d16-8022-b006b5b5cd2e/nike-just-do-it.jpg',
'https://static.nike.com/a/images/f_auto/dpr_1.0,cs_srgb/w_621,c_limit/aa52dbcb-437f-40d7-aba8-485b9166c0da/nike-just-do-it.jpg',
'https://static.nike.com/a/images/f_auto/dpr_1.0,cs_srgb/w_621,c_limit/35590940-95bc-4360-aaf0-3b4f2b690913/nike-just-do-it.png',
'https://www.newbalance.com/dw/image/v2/AAGI_PRD/on/demandware.static/-/Library-Sites-NBUS-NBCA/default/dw803b3a09/images/page-designer/2022/october_3/14428_Comp_J5_Image.jpg',
 'https://www.newbalance.com/dw/image/v2/AAGI_PRD/on/demandware.static/-/Library-Sites-NBUS-NBCA/default/dwc2463d13/images/page-designer/2022/october_3/14430_Comp_E_Image1.jpg?sw=808&sfrm=jpg',
'https://www.newbalance.com/dw/image/v2/AAGI_PRD/on/demandware.static/-/Library-Sites-NBUS-NBCA/default/dwe8369510/images/page-designer/2022/october_2/14437_Comp_E1_Image1.jpg?sw=808&sfrm=jpg',
'https://media.gucci.com/content/GiantEditorialStandard_1366x1643/1666791903/GiantEditorialStandard_HAHAHA-Harry-Styles_001_Default.jpg',
'https://static.nike.com/a/images/f_auto/dpr_1.0,cs_srgb/w_621,c_limit/142b1b85-a20a-46e5-8d4d-8b2c3467d9c3/nike-just-do-it.jpg']


return imagesArray[Math.floor(Math.random() * imagesArray.length)]
//Inside the function

CodePudding user response：

You can use useState hook to set the image you want to show. As you set the object key, you can then use the array to show the specific image after some interval. The code should look like this:

const {useState} = React;
    const App = ()=> {
      const imageObject = {
        one: "https://static.nike.com/a/images/f_auto/dpr_1.0,cs_srgb/w_1253,c_limit/a6c38705-dd40-43f8-a1ca-9ba62db12896/nike-just-do-it.jpg",
        two: "https://static.nike.com/a/images/f_auto/dpr_1.0,cs_srgb/w_1253,c_limit/30afe174-1232-4fa5-8bd2-c8d5c4140ea7/nike-just-do-it.jpg",
        three: "https://static.nike.com/a/images/f_auto/dpr_1.0,cs_srgb/w_1253,c_limit/abdc6ff0-7743-4d16-8022-b006b5b5cd2e/nike-just-do-it.jpg",
        four: "https://static.nike.com/a/images/f_auto/dpr_1.0,cs_srgb/w_621,c_limit/aa52dbcb-437f-40d7-aba8-485b9166c0da/nike-just-do-it.jpg",
        five: "https://static.nike.com/a/images/f_auto/dpr_1.0,cs_srgb/w_621,c_limit/35590940-95bc-4360-aaf0-3b4f2b690913/nike-just-do-it.png",
        six: "https://www.newbalance.com/dw/image/v2/AAGI_PRD/on/demandware.static/-/Library-Sites-NBUS-NBCA/default/dw803b3a09/images/page-designer/2022/october_3/14428_Comp_J5_Image.jpg",
        seven: "https://www.newbalance.com/dw/image/v2/AAGI_PRD/on/demandware.static/-/Library-Sites-NBUS-NBCA/default/dwc2463d13/images/page-designer/2022/october_3/14430_Comp_E_Image1.jpg?sw=808&sfrm=jpg",
        eight: "https://www.newbalance.com/dw/image/v2/AAGI_PRD/on/demandware.static/-/Library-Sites-NBUS-NBCA/default/dwe8369510/images/page-designer/2022/october_2/14437_Comp_E1_Image1.jpg?sw=808&sfrm=jpg",
        nine: "https://media.gucci.com/content/GiantEditorialStandard_1366x1643/1666791903/GiantEditorialStandard_HAHAHA-Harry-Styles_001_Default.jpg",
        ten: "https://static.nike.com/a/images/f_auto/dpr_1.0,cs_srgb/w_621,c_limit/142b1b85-a20a-46e5-8d4d-8b2c3467d9c3/nike-just-do-it.jpg"
      };

      const [image, setImage] = useState("");
      setInterval(() => {
        const myImageArray = Object.keys(imageObject);
        const randomNumber = Math.floor(Math.random() * myImageArray.length);
        const randomImage = myImageArray[randomNumber];
        setImage(randomImage);
        console.log(randomImage);
      }, 4000);

      return ( <
        div>
        <h1 > Image thingie </h1>
        <img src = {
          imageObject[image]
        }
        /></div>
      );
    }

// Render it
ReactDOM.createRoot(
    document.getElementById("root")
).render(
    <App/>
);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>

The live version can be seen here.

However, it is not recommended to use setInterval