that display labels. Items

and

designed using the styles that we added to the project at the very beginning of work on it.

import React, {Component} from "react"
class MemeGenerator extends Component {
    constructor() {
        super()
        this.state = {
            topText: "",
            bottomText: "",
            randomImg: "http://i.imgflip.com/1bij.jpg",
            allMemeImgs: []
        }
        this.handleChange = this.handleChange.bind(this)
    }
    componentDidMount() {
        fetch("https://api.imgflip.com/get_memes")
            .then(response => response.json())
            .then(response => {
                const {memes} = response.data
                this.setState({ allMemeImgs: memes })
            })
    }
    handleChange(event) {
        const {name, value} = event.target
        this.setState({ [name]: value })
    }
    render() {
        return (
            

                

                     
                     
                    Gen
                
                

                    
                    
{this.state.topText}
                    
{this.state.bottomText}
                
            
        )
    }
}
export default MemeGenerator

Here's what the app looks like now.

Application in the browser

Note that the image that initialized the state is displayed here. We do not yet use images that are stored in the state property allMemeImgs. Let's try to enter something into the text fields.

The application in the browser

As you can see, the subsystems of the application responsible for working with text function as expected. Now it remains only to make sure that by clicking on the button Genfrom the array with the image data, a random image would be selected and loaded into the element present on the page below the text input fields.

In order to equip the application with this feature - perform the following task. Create a method that fires when a button is clicked Gen. This method should select one of the images, information about which is stored in the state property allMemeImgs, and then perform actions that allow you to display this image in the element located under the text input fields. Keep in mind that inallMemeImgsAn array of objects describing the images is stored, and the fact that each object from this array has a property url.

Here is the code that provides a solution to this problem:

import React, {Component} from "react"
class MemeGenerator extends Component {
    constructor() {
        super()
        this.state = {
            topText: "",
            bottomText: "",
            randomImg: "http://i.imgflip.com/1bij.jpg",
            allMemeImgs: []
        }
        this.handleChange = this.handleChange.bind(this)
        this.handleSubmit = this.handleSubmit.bind(this)
    }
    componentDidMount() {
        fetch("https://api.imgflip.com/get_memes")
            .then(response => response.json())
            .then(response => {
                const {memes} = response.data
                this.setState({ allMemeImgs: memes })
            })
    }
    handleChange(event) {
        const {name, value} = event.target
        this.setState({ [name]: value })
    }
    handleSubmit(event) {
        event.preventDefault()
        const randNum = Math.floor(Math.random() * this.state.allMemeImgs.length)
        const randMemeImg = this.state.allMemeImgs[randNum].url
        this.setState({ randomImg: randMemeImg })
    }
    render() {
        return (
            

                

                     
                     
                    Gen
                
                

                    
                    
{this.state.topText}
                    
{this.state.bottomText}
                
            
        )
    }
}
export default MemeGenerator

A button Gencan be assigned a handler for the event that occurs when you click on it, as is done when working with any other buttons. However, given the fact that this button is used to submit the form, it is better to use the onSubmitform event handler . In this handler,, handleSubmit()we call the method of the event arriving in it event.preventDefault()in order to cancel the standard form submission procedure, during which the page is reloaded. Next, we get a random number in the range from 0 to the value corresponding to the index of the last element of the array allMemeImgsand use this number to refer to the element with the corresponding index. Turning to the element that is the object, we get the property of this object urland write it to the state propertyrandomImg. After that, the component is re-rendered and the appearance of the page changes.

Application page in browser

Course project completed.

Summary

In this lesson, you created an application that uses what you learned while mastering React. Next time we’ll talk about developing modern React applications and discuss project ideas, implementing which you can practice working with React.

Dear readers! Have you encountered any difficulties while completing this course project?