How to call the function so that there is no Maximum update depth exceeded error?

Question

React

I am creating a list and for each element of the list I want to insert a picture that will be taken from the State at the current number.
As I understand it, every time I create a list element and call the randomCat () function that pluses Current, a re-render occurs and a further error occurs. How and where to call a function so that it will work a certain number of times equal to the number of elements in the list?

import React from 'react'


export class Cat extends React.Component {
  state = {
    catsImg: [
      "https://storage.googleapis.com/ck-kitty-image/0x06012c8cf97bead5deae237070f9587f8e7a266d/495636.svg",
      "https://storage.googleapis.com/ck-kitty-image/0x06012c8cf97bead5deae237070f9587f8e7a266d/495625.svg",
      "https://storage.googleapis.com/ck-kitty-image/0x06012c8cf97bead5deae237070f9587f8e7a266d/495622.svg",
      "https://storage.googleapis.com/ck-kitty-image/0x06012c8cf97bead5deae237070f9587f8e7a266d/495619.svg",
      "https://storage.googleapis.com/ck-kitty-image/0x06012c8cf97bead5deae237070f9587f8e7a266d/495616.svg",
      "https://storage.googleapis.com/ck-kitty-image/0x06012c8cf97bead5deae237070f9587f8e7a266d/495613.svg",
      "https://storage.googleapis.com/ck-kitty-image/0x06012c8cf97bead5deae237070f9587f8e7a266d/495592.svg",
      "https://storage.googleapis.com/ck-kitty-image/0x06012c8cf97bead5deae237070f9587f8e7a266d/495579.svg",
      "https://storage.googleapis.com/ck-kitty-image/0x06012c8cf97bead5deae237070f9587f8e7a266d/336916.svg"
    ],
    current: 0,
  }

  randomCat = () => {
    if(this.state.current === this.state.catsImg.length -1){
        this.setState({
          current: 0
      })
    }else(
      this.setState((prevState) => ({
        current: prevState +1
      }
    ))
    )
  }

  render() {
    const { current, catsImg} = this.state
    const { cats } = this.props
    return(
      <ul className="catsList">
        {console.log(current)}
        {cats.map(cat => (
          <li key={cat.description} className='catsItem'>
            {this.randomCat()}
            <img src={catsImg[current]} alt=""/>
            <div>{cat.description}</div>
            <div>{cat.type}</div>
            <div>{cat.total}</div>
            <button>Buy</button>
            {' '}
            <button >Read Info</button>
          </li>
        ))}
      </ul>
    )
  }
}

Answer 1

You don't need to call this function at all, unless you're hiding the task that's really in front of you. You have already applied map - it's just "for each element of the list".
If an index is needed, it is passed to the map callback as the second parameter:

{cats.map((cat, index) => (
  <li key={cat.description} className="catsItem">
    <img src={catsImg[index]} alt=""/>
    ...

Answer 2

It seems to me that in general it is not a good practice to change the state through the render {this.randomCat()}