He estado tratando de trabajar en un proyecto de reacción de búsqueda de imágenes en el que puede hacer clic y almacenar las imágenes que desee después de la búsqueda. En este momento, puedo buscar y mostrar la imagen como botones, pero las imágenes aparecen en el botón solo después de hacer clic en él.

 function Image(props) { return ( <button className = "photo" onClick = {props.onClick}> <img width={200} height={200} src = {props.value} alt = "" onClick={myfunction()} /> </button> ) }

Estas funciones a continuación están dentro de otra clase.

 handleClick(i){ const image = this.state.image.slice(); console.log(global.imageLinks); image[i] = global.imageLinks[i]; this.setState({ image: image, }) } renderImage(i) { return ( <Image value = {this.state.image[i]} onClick={() => this.handleClick(i)} />) }

Intenté eliminar la parte onClick en el botón o mover la sección de la imagen, pero solo provoca muchos errores. ¿Hay alguna forma de que la imagen aparezca en el botón tan pronto como detecte que el valor es un enlace?

¡Muchas gracias!