-2
    <PSmall>
        <img src={images[1]} />
        <img src={images[2]} />
        <img src={images[3]} />
    </PSmall>

we have a styled component PSmall. It is necessary to make dynamic imgs instead of statically created ones, the number of which will depend on the number of elements in the image array. I.e. I receive an array with 5 elements and 5 img elements with the images[i] attribute should appear. One possible way is to create div and apply background img to them. but how to set src then. and how to choose the right path for them.\

const CreateDiv = (array:string[]) => { 
    if(array.length > 1){
        for (let i =1; i<(array.length-1); i++){
            let create = document.createElement('div');
            create.className='img';
            document.appendChild(create);
        }
    }
DrewSkow
  • 3
  • 2
  • https://ru.stackoverflow.com/ – eeegnu Oct 07 '21 at 20:10
  • ... what? In the programmers life - english is a GO TO language. While for a personal life you may use what ever you wish, but for programming EXPECIALLY when asking questions on forums such as StackOverFlow use english. if you, for some reason, can not speak english - go to https://ru.stackoverflow.com/ – Lith Oct 07 '21 at 20:10
  • See [Loop inside React JSX](https://stackoverflow.com/q/22876978/1218980) – Emile Bergeron Oct 07 '21 at 20:14

1 Answers1

1

let create = document.createElement('div'); Its a JavaScript code. In React it seen as evil!

React combines JavaScript and Html into one - JSX. Instead just use <div></div>.

For loops, use .map instead of foreach in case of rendering or processing arrays without needing an index.

So if you want a method to return a Div just use const CreateDiv = () => <div>// ur code //</div>

If you want to map an array to create divs for each new array parameter, for some reason, you can achieve it like so

const CreateDiv = (array) => array.map((item) => <div {...item}>// ur code //</div>)

NOTE in this case array is assuming you are passing some parameters for each new Div.

Regardless, Just use .map for mapping and <div> to return it. Same goes for any other component, or element, instead of div

Lith
  • 1,251
  • 6
  • 19