print and download image in React js

I have code like this :

<ImageGrid>

<MyCard title="first image" url="https://test.test" image="https://img1.link"  ''Button here' />

</ImageGrid>
const MyCard = props => {
  return (
    <a target="_blank" rel="noopener noreferrer" href={props.url}>
      <div
        <BasicImage alt={props.title} src={props.image} />
        <p>{props.title}</p>
      </div>
    </a>
  )
}

export default MyCard

I want to add button in MyCard to print img1 and button to download img1 thank you

Answer

Use onClick event to handle a function that can use to download and print the image.

<ImageGrid>

<MyCard title="first image" url="https://test.test" image="https://img1.link"  onClick={() => { this.downloadAndPrint(); }} />

</ImageGrid>

If you use class component then bind the function like this:

this.downloadAndPrint= this.downloadAndPrint.bind(this);

Function:

downloadAndPrint() {
  //function
}

For download take a look on this similar issue: How to download image in reactjs?

And to print the image you can use library like this: react-to-print