So what I want to do is go to the application, let's close this terminal, and let's go to our shop and let's create a new file called shopSearchBar.js in here we want to import React and component from react, class ShopSearchBar extends component and we want to say render and then we're going to want to say return class name is going to be shop-search-bar and let's actually take in a class name parameter and let's say that, we want to say class name in here that way we can put it on our grid easily. Okay, let's say constant class name is equal to this.props, and then let's export it.

shopSearchBar.js

import React, { Component } from 'react';

class ShopSearchBar extends Component {
    render() {
        const { className } = this.props;
        return (
            <div className={'${className} shop-search-bar'}>

            </div>
        )
    }
}

export default ShopSearchBar;

What we're going to do in here is we are actually going to make this a form okay. So what we want to do is we want to make this a form instead of a div and we want to use redux form. So let's say import redux form from redux form and then we're also going to want to include field and what we're going to do is make a search bar. Now I'm not going to make a component for this because it's the only place we're going to do it and it's the only form field that's going to be in here.

Although we kind of have to make it a component for this to work so let's say function FormSearchBar and we'll say props because there's a few that we need to do. And we'll say return and then in here we'll just turn an input and we're going to take props.input and we're going to map that out. And then we're going to say type is equal to search bar and then we're going to say text, and then let's see what else do we want?

I'm going to check formFields.js just for a reference. Okay, we've got a placeholder, yeah we want to placeholder obviously. So let's say placeholder is equal to props.placeholder. Okay, I'm going to check form fields one more time and input type className, okay we need a className. So we have all that, let's just say class name is equal to props.className and then I guess we'll implement some of our own className styles in here, and we'll say form-search-bar.

shopSearchBar.js

import React, { Component } from 'react';

import { reduxForm, Field } from 'redux-form';

function FormSearchBar(props) {
    return (
        <input className={`${props.className} form-search-bar`} {...props.input} type='text' placeholder={`${props.placeholder}`} />
    )
}

class ShopSearchBar extends Component {
    render() {
        const { className } = this.props;
        return (
            <form className={'${className} shop-search-bar'}>

            </form>
        )
    }
}

export default ShopSearchBar;

Okay, so write out that function, and let's put it in here FormSearchBar, and then what we want to do is use it in here. We want to say field and then we want to say className is equal to shop-search-bar__form-search-bar and then we want to say placeholder is equal to let's say search I guess, what does it say in the design? Yeah search. And we might put font awesome in to get that icon.

class ShopSearchBar extends Component {
    render() {
        const { className } = this.props;
        return (
            <form className={'${className} shop-search-bar'}>
                <Field className='shop-search-bar__form-search-bar' placeholder='search'/>
            </form>
        )
    }
}

So let's go to fontawesome.com and I'll go to the code while it's loading so you can see this. Okay, let's switch to font-awesome, we'll go to icons, we'll go to how to use, my bad. And we want to copy this,

then we want to go to icons again, and let's go back to Visual Studio code and go to index.html and lets paste this code we just copied in there okay, so I just pasted this in there. Okay, now we're in here and in this search bar let's say search, ironic, okay let's select the search.

And we need this okay, so we need fas fa-search, I'm just going to copy that.

Now what I'm going to do is I'm going to close out of index.html, and in the placeholder in shopSearchBar.js, basically I'm going to make this since it's a search bar I'm going to put in some ticks here and I'm going to put some braces around this and then I'll put it right before this okay. So here's the deal, we can't really do this, this wont really work, at least I don't think it will but we'll try it in a second. So let's keep what we have and and let's comment this out right here, and then we want to see if it works and then we'll add that in as a little extra thing.

So as of right now this is probably working, we just have to add one more thing on field which is component and then we need to put FormSearchBar so let's make sure we have that and we should be good, let's try this out now. What we are going to have to do is go into shop.js and use it so shop search bar, okay so right here we'll say ShopSearchBar, I've auto imported it so make sure you import search bar up here from shop search bar and let's say class name is equal to shop__search-bar.

shop.js

import ShopSearchBar from './shopSearchBar';

return (
    <div className='shop'>
        <ShopSearchBar className='shop__search-bar'/>
        <div className='shop__procucts'>

Okay, now let's go into a search bar, and make sure that we're using that class name we are okay, and we're saying FormSearchBar so this should be working, let's test it out. Alright, it looks like we have an error, let's inspect it, let's go to the console and it's probably because we're not degrading it with redux form.

So let's go in our code and let's decorate shop search bar with redux form. So let's say redux form, well first we want to say ShopSearchBar is equal to redux form and then we'll pass in some configurations so we'll say form and say ShopSearchBar and then we we'll decorate it, so let's say shop search bar can extend the functionality and we're good there.

shopSearchBar.js

ShopSearchBar = reduxForm({
    form: 'ShopSearchBar'
})(ShopSearchBar);

Now let's try it. All right so it says the prop name is marked as required in field but its value is undefined.

So let's go ahead and see why that is. Okay we have to go in here and we have to provide a name on this field so let's say name is equal to shop-search-bar.

<form className={`${className} shop-search-bar`}>
    <Field name='shop-search-bar' className='shop-search-bar__form-search-bar' placeholder='search' component={FormSearchBar} />
</form>

Okay so now when we go to our application we have our search bar and no errors. Although when we type in here nothing really happens it just reloads the page when we return it. So what we need to do is we need to implement the handle submit function here and then throw back up. So pretty simple, all we have to do is pass in handleSubmit with props here with class name and then on the form we just have to say onSubmit is equal to in braces handle submit.

shopSearchBar.js

class ShopSearchBar extends Component {
    render() {
        const { className, handleSubmit } = this.props;
        return (
            <form onSubmit={handleSubmit} className={`${className} shop-search-bar`}>
                <Field name='shop-search-bar' className='shop-search-bar__form-search-bar' placeholder='search' component={FormSearchBar} />
            </form>
        )
    }    
}

Now what we need to do is we need to go back to shop.js in our shop component and we need to provide a function called onSubmit so let's say onSubmit is equal to fields and then we will say in this arrow function console.log fields. Now in here we are going to hit this except for the only way we can hit it is if we say in shop search bar onSubmit is equal to onSubmit and make sure you say this.onSubmit.

shop.js

<ShopSearchBar onSubmit={this.onSubmit} className='shop__search-bar'/>

Okay so that should work, it should console log whatever we search. So let's go to Chrome and try it out, searching stuff, hit return and you'll see it says shops search bar searching stuff.

Okay so it's working, and then let's click on this navbar and make sure it's working, that's working great. Okay so let's look back at our design and see if this is kind of following what we're trying to do. Okay, we've got the search and the products alright. It doesn't really show you what happens when you click here but you get the idea, you obviously want to filter them.

So what we need to do is we need to actually filter them based on our search query here when we hit return. So what we want to do is in the next video let's figure out how to do and it will be pretty simple just another action creator. So let's commit our code and get into that

Terminal

git status
git add .
git commit -m "built shop search bar form and form field"

I'll see you in the next video.

Resources

Source code