¿Cómo realizo el mismo setState dentro del map pero fuera de renderizar/evitar el bucle infinito que es:

Error: se excedió la profundidad máxima de actualización. Esto puede suceder cuando un componente llama repetidamente a setState dentro de componentWillUpdate o componentDidUpdate. React limita el número de anidados.

 class MyComponent { render() { var images = [ "https://i.picsum.photos/id/912/500/300.jpg?hmac=m-mTOMKlGcXQHDObNABzzeFPUPMuBVHr2l4rhrGjnmQ", "https://i.picsum.photos/id/912/500/300.jpg?hmac=m-mTOMKlGcXQHDObNABzzeFPUPMuBVHr2l4rhrGjnmQ", "https://i.picsum.photos/id/912/500/300.jpg?hmac=m-mTOMKlGcXQHDObNABzzeFPUPMuBVHr2l4rhrGjnmQ", "", "", ]; return ( <div class="row thumbnailview"> {images.map((image, index) => { if (image.length < 2) { return ( <div className="col thumbnails hidden"> <img src={image} className="thumbnail" /> </div> ); } if (image.length >= 2) { return ( <div className="col thumbnails"> <img src={image} className="thumbnail" onClick={this.setState({ imageSrc: { image } })} /> </div> ); } })} </div> ); } }