MemeGenarator.js

import React, {Component} from "react"
import "./style.css"

export default class MemeGenarator extends Component {
    constructor(){
        super()
        this.state = {
            data: [],
            topText: "",
            bottomText: "",
            randomImage: "https://i.imgflip.com/26am.jpg"
        }
        this.handleSubmit = this.handleSubmit.bind(this)
        this.handelChange = this.handelChange.bind(this)
    }
    componentDidMount(){
        fetch("https://api.imgflip.com/get_memes")
        .then((resp) => resp.json())
        .then((resp) => {
            const {memes} = resp.data
            this.setState({
                data: memes
            })
        })
    }
    handleSubmit(e){
        e.preventDefault()
        const randomNum = [Math.floor(Math.random() * (100 - 1 + 1)) + this.state.data.length]
        const randomMemeImg = this.state.data[randomNum].url
        this.setState({randomImage: randomMemeImg})
    }
    handelChange(evt){
        const {name, value} = evt.target
        this.setState({
            [name]: value
        })
    }
    render(){
        return(
            <div>
                <form onSubmit={this.handleSubmit}>
                    <input 
                        name="topText"
                        value={this.state.topText} 
                        onChange={this.handelChange} 
                        type="text" 
                        placeholder="Top Text"
                    />
                    <input 
                        name="bottomText"
                        value={this.state.bottomText} 
                        onChange={this.handelChange} 
                        type="text"  
                        placeholder="Bottom Text"
                    />                   
                <button>New Meme</button>
                </form>  
                <h1 className="topText">{this.state.topText}</h1>
                <img alt="Meme" src={this.state.randomImage}/>
                <h1 className="bottomText">{this.state.bottomText}</h1>
            </div>
        )
    }
}