Can't render image got from API inside React App

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>