Can't render image got from API inside React App - reactjs

Question

I got list of images from an API, but none of them simply don't show up inside my app, it just hits the alt.. <img scr={this.state.randomImg} alt="Meme"></img> What-I-got-on-screen-after-hitting-"generete"-button-few-times.jpg although if I just paste same scr in inside the img in regular html file it renders perfectly
import React, { Component } from 'react';
class MemeGenerator extends Component {
constructor() {
super();
this.state = {
randomImg: "https://i.imgflip.com/1ur9b0.jpg",
question: "",
punchline: "",
allMemes: []
}
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.getRandomInt = this.getRandomInt.bind(this);
this.componentDidMount = this.componentDidMount.bind(this);
}
getRandomInt(max) {
return Math.floor(Math.random() * Math.floor(max));
}
componentDidMount() {
const imgFlip = "https://api.imgflip.com/get_memes";
fetch(imgFlip)
.then(response => response.json())
.then(response => {
const memes = response.data.memes;
this.setState(
{
allMemes: memes
}
)
this.setState({
randomImg: memes[this.getRandomInt(memes.length)].url
})
console.log(this.state.randomImg);
})
}
handleChange(event) {
const { name, value } = event.target;
this.setState(
{
[name]: value
}
)
}
handleSubmit(event) {
const number = this.getRandomInt(this.state.allMemes.length);
this.setState({
randomImg: this.state.allMemes[number].url
});
event.preventDefault();
console.log(this.state.randomImg);
}
render() {
return (
<main>
<form className='make-meme'>
<input type="text" name="question" value={this.state.question} onChange={this.handleChange} />
<input type="text" name="punchline" value={this.state.punchline} onChange={this.handleChange} />
<button type="submit" onClick={this.handleSubmit}>Genenerate</button>
</form>
<div className="imgWrapper">
<img scr={this.state.randomImg} alt="Meme"></img>
<h2 className="meme-text question">{this.state.question}</h2>
<h2 className="meme-text punchline">{this.state.punchline}</h2>
</div>
</main>
);
}
}
export default MemeGenerator;
My first question don't judge please

Answer 1

scr property of your image should be src
For Example:
you should have
<img src={this.state.randomImg} alt="Meme"></img>