Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

126
Views
React-Redux - Show and Hide Component

The objective is when i mouse over the link on the navbar, i need to show a Component call ProductDescription, and Hide the component when the mouse is not over.

I have a example

https://www.dkny.com/ba/

The objective is to make something like that.

app.js

import React, { Component } from 'react';
import PaginaInicial from '../containers/index';
import ListaJogos from '../containers/lista_jogos';
import ListaMusicas from '../containers/lista_musicas';
import NavBar from '../containers/menu';
import ProductDescription from '../containers/produto';


export default class App extends Component {
render() {
return (
    <div>
        <NavBar />
        <ProductDescription />
    </div>
);
}
}

NavBar Component

import React, { Component } from 'react';

class NavBar extends Component{



render(){
    return (
        <div>
            <ul>
                <li><a href="#">Link 1</a></li>
            </ul>
        </div>
    )
}

}

export default NavBar;

ProductDescription Component

import React, { Component } from 'react';

class Produto extends Component{

render(){

    return(

        <div>Some Product Description</div>

    )
}

}


export default ProductDescription;

Actions index.js

function mostrarProduto(product) {
 return {
   type: 'SHOW_PRODUCT',
   payload: product
 }
}

function esconderProduto(product) {
 return {
  type: 'HIDE_PRODUCT',
  payload: product
 }
}

Product Reducer

const productReducer = (state = null, action) => {
  switch (action.type) {
    case 'SHOW_PRODUCT':
      return action.payload;
    case 'HIDE_PRODUCT':
      return null;
    default:
      return state;
  }
}

I dont know what i have to do in the components, i know i have to dispatch the actions, but im confused, could i need some help, thanks.

over 4 years ago · Santiago Trujillo
2 answers
Answer question

0

I am going to assume that you will be hovering over navbar item and the item needs to be displayed in ProductDescription, which is fine accepting null parameter.

You need to connect your Navbar component to redux store (or better, create a navbar "smart" container that connects to redux store) and bind your actions.

import React from 'react';
import { connect } from 'react-redux';

import { mostrarProduto, esconderProduto } from 'actions/index.js';

export class Navbar extends React.Component {

    constructor(props) {
        super(props);
        this.showProduct = this.showProduct.bind(this);
        this.hideProduct = this.hideProduct.bind(this);
    }

    showProduct() {
        // Bind object however you like
        this.props.mostrarProduto(productObjHere);
    }

    hideProduct() {
        // Bind object however you like
        // Also, if only want to show a single product on mouse over,
        // you don't need to pass product object; your reducer also returns null
        // for this one.
        this.props.esconderProduto(productObjHere);
    }

    render() {
        return (
            <ul>
                <li>
                    <a href="#" onMouseOver={this.showProduct} onMouseOut={this.hideProduct}>
                        Link #1
                    </a>
                </li>
            </ul>
        );
    }

}

const { func } = React.PropTypes;

Navbar.propTypes = {
    mostrarProduto.isRequired,
    esconderProduto.isRequired
};

export default connect(
    () => {},
    { mostrarProduto, esconderProduto }
)(Navbar);

You pass actions into redux connect and the get mapped into your props. This way you can dispatch these actions from your props using your action creators.

Then in your Product Description, you map the state to prop (no actions) and show the data.

import React from 'react';
import { connect } from 'react-redux';

export class ProductDescription extends React.Component {

    render() {
        return (
            <div>{this.props.hoveredProduct}</div>
        );
    }

}

const { func } = React.PropTypes;

const mapStateToProps = state => ({
    hoveredProduct: state.product
});
// I used different names for state and mapped prop, so the declaration
// is clear

export default connect(
    mapStateToProps,
    null
)(ProductDescription);
over 4 years ago · Santiago Trujillo Report

0

First you'll need to use the onMouseOver and onMouseLeave functions in the NavBar component, more specifically, the HTML tag that you'd like to use it in.

<div onMouseOver={/* dispatch action here */} onMouseLeave={/* dispatch action here */}>
  <ul>
      <li><a href="#">Link 1</a></li>
  </ul>
</div>

When the div is entered the function fires once. If the mouse leaves this div and entered again the function fires again.

There are different ways you can dispatch an action here. Based on the code you provided you can do it directly within the component like so:

<div onMouseOver={this.props.dispatch(mostrarProduto())} onMouseLeave={this.props.dispatch(esconderProduto())}>

Or if you use mapDispatchToProps from Redux you can simplify the above to this:

<div onMouseOver={this.props.mostrarProduto()} onMouseLeave={this.props.esconderProduto()}>

Your current actions uses a payload key but if ProductDescription is the only component you want to hide/show you can omit it because you don't need to identify which product to hide/show if there is only one anyways. You then only have to dispatch the type:

function mostrarProduto() {
  return {
    type: 'SHOW_PRODUCT'
  }
}

function esconderProduto() {
  return {
   type: 'HIDE_PRODUCT'
  }
}

In the reducer you can have the default state be false so that the ProductDescription does not show at the start of the render. When the actions above are dispatched the reducer handles the type accordingly:

const productReducer = (state = false, action) => {
  switch (action.type) {
    case 'SHOW_PRODUCT':
      return true;
    case 'HIDE_PRODUCT':
      return false;
    default:
      return state;
  }
}

Now ProductDescription needs to read this state somehow and that's where you'd use the connect and mapStateToProps functions from Redux:

const mapStateToProps = (state) => ({
  shouldBeVisible: state.shouldBeVisible //<----- replace `shouldBeVisible` with what ever you're setting in your state store. See `createStore` in the Redux docs for more info.
})

export default connect(mapStateToProps)(ProductDescription)

Then in ProductDescription you'd render the component based on the boolean value of this.props.isVisible:

class ProductDescription extends React.Component {
  //...

  render() {
      if (this.props.shouldBeVisible) {
        return <div>Some Product Description</div>
      } else { // shouldBeVisible is false, then show nothing.
        return null
      }
  }
}

const mapStateToProps = (state) => ({
  shouldBeVisible: state.shouldBeVisible
})

export default connect(mapStateToProps)(ProductDescription)
over 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!