Найдите React / Redux

import React, {Component} from 'react';
import {bindActionCreator} from 'redux';
import {connect} from 'react-redux';
//import scroll for search
//import Scroll from './components/Search/Scroll';
import SearchBox from '../components/Search/SearchBox';
//import action for search
import {setSearchField} from '../actions/actionSearch';
//list of prod
import ListOfProd from './ListOfProd';

const mapStateToProps = state =>{
	return{
		product: state.product,
		searchField: state.searchField
	}
}

const mapDispatchToProps = (dispatch) => {
	return{
		onSearchChange: (event) => dispatch(setSearchField(event.target.value))
	}
}

class Search extends React.Component{
	render(){
		const {searchField, onSearchChange} = this.props;
		// const filterProduct = this.props.product.filter(product =>{
		// 	return product.prod.includes(searchField);
		// })
		return(
			<div className = 'tc'>
				<SearchBox searchChange = {onSearchChange}></SearchBox>
				<ListOfProd></ListOfProd>
			</div>
			)
	}
}

export default connect(mapStateToProps, mapDispatchToProps)(Search);



 	

// import Component 
// hook it up to data store
import React, {Component} from 'react';
import {bindActionCreator} from 'redux';
import {connect} from 'react-redux';
//import Search from 'Search';

class ListOfProd extends React.Component {

	createListItems(){
	
			console.info(this.props.product);
			
			return this.props.product.map((product, i) => {
			 console.info(this.props.product.prod);
			 console.info(this.props.searchField);
			return(
					<li key = {i}>{product.prod} {product.price}</li>
				)
		});
		
	}

	render(){
		return(
				<ul>
					{this.createListItems()}
				</ul>
			)
	}
}

const mapStateToProps = state =>{
	return{
		product: state.searchProd.product,
		searchField: state.searchProd.searchField
	}
}

export default connect(mapStateToProps)(ListOfProd);

import {CHANGE_SEARCH_FIELD} from '../constants/constants';
export const setSearchField = (text) => ({
	type: CHANGE_SEARCH_FIELD,
	payload: text
})

import {CHANGE_SEARCH_FIELD} from '../constants/constants';
import React from 'react';
const initialState = {
	searchField: '',
	product : [
		{	
			id: 1,
			prod: "prod1",
			price: "5"

		},
		{
			id:2,
			prod: "prod2",
			price: "5"
		}
	]
}

export const searchProd = (state = initialState, action = {}) =>{
	console.info(action.payload);
	console.info(action.type);
	switch(action.type){
		case CHANGE_SEARCH_FIELD:{
			console.info(action.payload);
			console.info(state.product);

			return {...state, searchField: action.payload};}
		default: 
			return state;
	}
	
	}

import React, { Component } from 'react';
import SignIn from './components/SignIn/SignIn';
import Register from './components/Register/Register';
import ListOfProd from './containers/ListOfProd';
import Search from './containers/Search';

import './App.css';

class App extends Component {
  render() {

    return (
      <div className = "App">
        <Search></Search>
      </div>

    );
  }
}

export default App;