I've been trying to work on an image search react project where you can click and store images that you want after searching. Right now I am able to search for and show the image as buttons, but the images appear on the button only after you click it.

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

These functions below are inside another class

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)}
    />)
}

I tried deleting the onClick part in the button or moving the image section but it just causes a lot of errors. Is there any way so that the image will appear on the button as soon as it detects that the value is a link?

Many thanks!