how to link QR code to a cat photo (REACT) - reactjs

Question

here I have an ajax request that gets the photo of a random cat
import React, { Component } from 'react';
class RandomCat extends React.Component {
constructor(props) {
super(props)
this.state = {}
this.fetchRandomCatImg = this.fetchRandomCatImg.bind(this)
}
componentDidMount() {
this.fetchRandomCatImg()
}
fetchRandomCatImg() {
fetch("https://aws.random.cat/meow")
.then(response => response.json())
.then(data => {
this.setState({
error: null,
ready: true,
src: data.file
})
})
.catch(error => this.setState({ error }))
}
render() {
if (this.state.error) return <p>Oops, something went wrong!</p>
if (!this.state.ready) return <p>Loading...</p>
return <img src={this.state.src} className="cat" alt="random cat photo" />
}
}
export default RandomCat;
here we need to make a qr image code that links to the same photo that gets generated from that call
it means we need to pass data resulted from the cat api to the other ajax call that gets the qr code
I tried doing this but it gave another photo(new one)
import React, { Component } from 'react';
class QR extends React.Component {
constructor(props) {
super(props)
this.state = {}
this.fetchQR = this.fetchQR.bind(this)
}
componentDidMount() {
this.fetchQR()
}
fetchQR() {
fetch("https://qrtag.net/api/qr_12.svg?url=https://aws.random.cat/meow" )
.then(response => response.json())
.then(data => {
this.setState({
error: null,
ready: true,
src: data.file
})
})
.catch(error => this.setState({ error }))
}
render() {
if (this.state.error) return <p>Oops, something went wrong!</p>
if (!this.state.ready) return <p>Loading...</p>
return <img className="QR"src={this.state.src} alt="qrtag"/>
}
}
export default QR;

Answer 1

This is a bit different but you can use this package:
https://www.npmjs.com/package/qrcode.react
And then you only need to do one API call. Once the URL of the file is in your state, you display the QR Code like this:
<QRCode value={this.state.src} />
But if you still want to use the QR code generator API, you need to pass the URL of the cat you just fetched to this component, the value of data.fetch (this.state.src).
If you pass it https://aws.random.cat/meow of course it won't work.