Image Search App using unsplash API in ReactJS -2

Welcome to part-2 to the series. 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;

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

Now, we will start implementing the logic to use our Search term entered by the user. We could use the Search Term(this.state.val) in our Search Component only, but we will pass it Back to Parent App component. We want the image list to be shown by a different component ImageList.

For this we will first change our App.js to a class based component, as we have to deal with state later on.

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

    class App extends React.Component  {
        onSearchSubmit(term) {
            console.log(term);
        }

        render() {
            return (
                <div>
                    <SearchBar userSubmit={this.onSearchSubmit}/>
                </div>
            )
        }

    }

    export default App;

In the above code the new terms are marked in bold. Here, we are passing a prop to SearchBar component called userSubmit. It calls a callback function onSearchSubmit.

Now in our SearchBar.js file, we will change the onFormSubmit method to send the user entered Search term in this.state.val through the props userSubmit to App.js

    onFormSubmit = (event) => {
            event.preventDefault();
            this.props.userSubmit(this.state.val);
        }

Now, on entering anything in our Search bar and then pressing enter, we get the console.log from our App.js file. Details of this whole logic can be found, in another of my blog post at this link. Check Question 52.

console from App.js

Now, it’s time to load some real data from unsplash api. The idea is to take the Search term entered in the Search Bar and use it. Then search those pictures in unsplash and show those pictures in our App.

So, head over to https://unsplash.com/developers and register as a developer. Once, you register, it will show the below page.

unsplash register

Now, click on New Application and it will ask for some basic things to be checked. Check the same as below screenshot.

Basic Checks

And then scroll down and click on Accept Terms. It will open the below popup, where you have to enter your Application Name and Description.

Accept Term

Once you click on Create application, it will take you to the completion page. Here you will find the Access Keys. Copy it by clicking on the clipboard. Mine is hidden, as you show create your own.

Access Keys hidden

Now, we will create the AJAX client to call the unsplash API. We will use the popular third party library axios as our AJAX client. We have to install axios first, so head over to your terminal. Close the running app(the npm start) by pressing Ctrl+c and type npm install — save axios

axios install

Don’t forget to start the app again by npm start

Now, we will go to our App.js and use axios to make API call to unsplash.

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

    class App extends React.Component  {
        onSearchSubmit(term) {
            axios.get('https://api.unsplash.com/search/photos', {
                params: { query: term},
                headers: {
                    Authorization: 'Client-ID YOUR_ACCESS_KEY'
                }
            })
        }

        render() {
            return (
                <div>
                    <SearchBar userSubmit={this.onSearchSubmit}/>
                </div>
            )
        }

    }

    export default App;

Here, we are importing axios first. Then we are using the axios.get method. The endpoint of https://api.unsplash.com/search/photos and other details are from unsplash api documentation.

In the above code in place of YOUR_ACCESS_KEY ,use the Access Keys you got while creating the app in unsplash site.

Now head to your http://localhost:3000/ and open the developer console. In developer console, open the Network tab. Now search for any item and you will see a network request been made, as in screenshot below.

Network Request.

This concludes part-2 of the series.