Image Search App using unsplash API in ReactJS -2

Photo by Lili Kovac on Unsplash

Welcome to part-2 to the series. You can find part-1 here. We will start from where we left in part-1.

We will work on SearchBar.js file and use the standard React syntax to handle form.

import React from 'react';
import './SearchBar.css';

class SearchBar extends React.Component {
    state = { val: '' }

    onInputChange = (event) => {
        this.setState({ val: event.target.value })
    }

    onFormSubmit = (event) => {
        event.preventDefault();
        console.log(this.state.val);
    }

    render() {
        return (
            <div>
                <form onSubmit={this.onFormSubmit}  className="flexContainer">
                    <label><h2>Image Search: </h2></label>
                    <input
                        className="inputStyle"
                        type="text"
                        value={this.state.val}
                        onChange={this.onInputChange}
                    />
                </form>
            </div>
        )
    }
}

export default SearchBar;

Here, the bold things are changed. Details of this whole logic can be found, in another of my blog post at this link. Check Question 50 and Question 51.

We can see this in action by typing anything in Search Bar and pressing enter. It will console log the same.

Magic of Arrow Function

You can find the rest of the article on my blog site. The link for same is below.

https://thewebdev.tech/image-search-unsplash-react-2

You can find part-3 here.