how can I add img as a dynamic component

Question

So what I am trying to do is to add dynamic value to this div images I want to delete this whole images from here take them to another component as an array and then use map() to dynamically change those images on the screen

 return (
    <div className="container">
      <div ref={sliderRef} id="slider" className="slide-wrap">
        <div
          ref={holderRef}
          id="holder"
          onMouseDown={mouseDown}
          onMouseMove={mouseMoveHandle}
          onMouseUp={mouseUp}
          onTouchStart={touchStart}
          onTouchMove={touchMove}
          onTouchEnd={touchEnd}
          className="slide_holder"
        >
          <div id="menus" className="slide_menus animation" ref={menusRef}>
            <div className="menu">
              <img
                id="img"
                className="img-responsive"
                src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/GFSJVKYET2.jpg"
                alt=""
              />
            </div>
            <div className="menu">
              <img
                className="slide-img img-responsive"
                src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/FH2HGFAG69.jpg"
                alt=""
              />
            </div>
            <div className="menu">
              <img
                className="slide-img img-responsive"
                src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/FH2HGFAG69.jpg"
                alt=""
              />
            </div>
          </div>
        </div>
      </div>

score 0 · Answer 1 · answered Mar 17 '21 at 21:12

You gotta do exactly what you said you wanna do. Create an array with the properties of your images and map them to components:

<!DOCTYPE html>
<html>
    <head>
        <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
        <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
        <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
        <script type="text/babel">
            class Images extends React.Component {
                render() {
                    const myImages = [
                        {className: null, alt: "random-image-1", src: "https://miro.medium.com/max/5000/1*1BUIofZgqVuR6nj8LbrRtQ.jpeg"},
                        {className: null, alt: "random-image-2", src: "https://files.realpython.com/media/random_data_watermark.576078a4008d.jpg"},
                        {className: null, alt: "random-image-3", src: "https://www.freecodecamp.org/news/content/images/2020/11/Untitled-design--1-.png"}
                    ]

                    return (
                        myImages.map((image, idx) => {
                            return (
                                <img
                                    key={idx}
                                    className={image.className}
                                    src={image.src}
                                    alt={image.alt} />
                            )
                        })
                    )
                }
            }

            ReactDOM.render(<Images />, document.getElementById("root"));
        </script>
    </head>

    <body>
        <div id="root"></div>
    </body>
</html>

Take a look at this SO question: How to map an array of objects in React

In my example the array is a constant, if you want your images to be dynamic you will have to put them in the state of your component so you can change them and react will re-render it. — crocarneiro, Mar 17 '21 at 21:23
well heres the point its my first time doing slider like touch friendly slider and I dont know how to create useState hook for that I can display the first element of array but after that I am stuck — Blank Space, Mar 17 '21 at 21:25
If you could update the question to provide more details about where exactly you are stuck I can update the code in my answer. — crocarneiro, Mar 17 '21 at 21:31

how can I add img as a dynamic component

1 Answers1