title: How to display a detailed/specific page in React and Redux?
body: <p>I'm currently building an e-commerce website as a personal project using ReactJS and Redux for the Front-end Framework and state Management. Now I've Implemented a searchbar and when I search a product (in this case a phone), i want it to direct the user to the detailed view of that respective product.</p>
  <p>Here's the code for the following :</p>
  <p>-----&gt; App.js</p>
  <pre><code>const mapStateToProps = (state) =&gt; {
     return {
         searchField : state.searchReducer.searchField,
         products : state.cartReducer.products
       }
     }
  
  const mapDispatchToProps = (dispatch) =&gt; {
      return {
          onSearchChange : (event) =&gt; dispatch(setSearchField(event.target.value))
        }
      }
  
  class App extends Component{
  render(){
  const {products,searchField,onSearchChange} = this.props;
  
  const onSearchProducts = (event) =&gt; {
    if(event.key === 'Enter'){
      console.log('The Key Presses is ',event.key);
      console.log('onSearchProducts cartItems',this.props);
      const filteredPhone = products.filter(phone =&gt; {
        return phone.pName.toLowerCase().includes(searchField.toLowerCase());
      })
      console.log('This is onSearchProducts',filteredPhone[0].pid);
      return filteredPhone[0].pid;
    }
    return null;
  }
  
  return (
      &lt;Router&gt;
        &lt;div&gt;
          &lt;Navbar/&gt;
          &lt;Searchbar onSearchChange={onSearchChange} onSearchProducts={onSearchProducts}/&gt;
          {/* &lt;div className='dib w-100'&gt;
            &lt;Homepage /&gt;
          &lt;/div&gt; */}
          &lt;Route path='/products/:id' exact component={Detailedpage}/&gt;
          {/* &lt;Signup/&gt;
          &lt;Register/&gt; */}
          &lt;Route path='/cart' exact component={Cart}/&gt;
        &lt;/div&gt;
      &lt;/Router&gt;
       );
      }
    }
  
  export default connect(mapStateToProps,mapDispatchToProps)(App);
  </code></pre>
  <p>-----&gt; Searchbar.js</p>
  <pre><code>import React from 'react';
  
  const Searchbar = ({onSearchChange,onSearchProducts}) =&gt; {
       return(
            &lt;div className='tc mt4'&gt;
                &lt;input onChange={onSearchChange} 
                       onKeyPress={onSearchProducts} 
                       className='searchbar w-40 pa1' 
                       type='search' 
                       placeholder='Search'/&gt;
           &lt;/div&gt;
          );
         }
  
  export default Searchbar;
  </code></pre>
  <p>-----&gt; Detailedpage.js (Ignore the specs and all that stuff I've written in the list-item and p tags)</p>
  <pre><code>import React from 'react';
  import {connect} from 'react-redux';
  import {addProductToCart} from '../../Actions/Actions';
  import './Detailedpage.css';
  
  const mapStateToProps = (state) =&gt; {
      return {
          products : state.cartReducer.products
      }
  }
  
  const mapDispatchToProps = (dispatch) =&gt; {
      return {
          addProductToCart : (product) =&gt; dispatch(addProductToCart(product))
      }
  }
  
  const Detailedpage = (props) =&gt; {
      const {products,addProductToCart} = props;
      const product = products.find((phone) =&gt; {
          if((phone.pid) === Number(props.match.params.id)){
              return phone;
          }
          return null;
      });
  
  console.log('mapStateToProps -&gt; ',products);
  const {pURL,pName} = product;
  return(
      &lt;div style={{display: 'flex',justifyContent: 'space-between'}}&gt;
          &lt;div className='dPageImgDiv bw1 mb4'&gt;
              &lt;img className='dPageImg' src={pURL} alt={'phone'}/&gt;
          &lt;/div&gt;
          &lt;div className='infoSide tc pb4 mb4'&gt;
              &lt;p className='phoneTitle fw4'&gt;{pName}&lt;/p&gt;
              &lt;div&gt;
                  &lt;ul className='details'&gt;
                      &lt;li&gt;90 Hz Fluid Display&lt;/li&gt;
                      &lt;li&gt;Qualcomm® Snapdragon™ 865 with 5G&lt;/li&gt;
                      &lt;li&gt;Slim and Sleek Curved Design&lt;/li&gt;
                      &lt;li&gt;48 MP Triple Camera&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
              &lt;div className='overview dib fw3'&gt;
                  &lt;p&gt;
                  The OnePlus 8 Pro is the biggest, meanest, and best smartphone OnePlus has put out 
                  thus far. At least that’s what it aims to be. It features a fantastic set of cameras, 
                  a big, gorgeous, 
                  120 Hz AMOLED screen, the fastest possible hardware on an Android phone, and an 
                  impressive battery.
                  But do you need to spend $900 for it, when the OnePlus 8 delivers a similar 
                  experience for $700? Well, the 8 Pro’s camera is definitely an improvement over its 
                  cheaper sibling, 
                  but it also has a bunch of quirks that you may or may not like.
                  &lt;/p&gt;
              &lt;/div&gt;
              &lt;div&gt;
                    &lt;button onClick={(product) =&gt; addProductToCart(product)} 
                          className='addToCartButton' 
                          type='button'&gt;Add to Cart
                    &lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      );
  }
  
  export default connect(mapStateToProps,mapDispatchToProps)(Detailedpage);
  </code></pre>