React-Redux - Toogle a button to show and hide details

Active3 hr before
Viewed126 times

7 Answers


I updated answer with simplest case, there you could have local component state in store and use Redux action to change it. – Alexander Doroshenko Oct 18 '16 at 9:26 ,But, if you have big app, and use Redux, another option - have component state in store, and use Redux actions to work with it. This way you could have global state, accessible from another components.,Take a look at Redux-UI or Redux Fractal, which could help you with that. This libs take care of storing local components state in store and give you helpers to work with that state on component level.

So you could have something like this:

   state: {
      showDescription: false
load more v

There are many ways to show and hide components in react. I’ve noticed a common pattern in React code, where the the show and hide logic is built directly into the component. This conflates the concerns of showing and hiding a component and those of how and what to render. In this article I’m going to build a very simple <Toggle> component using Redux hooks, that can be used to show and hide any React component.,Here is an example of a common approach to showing and hiding a component using redux state.,A simpler alternative is to create a <Toggle> component that can wrap any other React component. The <Toggle> component can show and hide its children based on some external condition. This allows us to remove the boilerplate code from our components and leads to cleaner component design.

Here is an example of a common approach to showing and hiding a component using redux state.

import React from 'react’;import {connect} from 'react-redux';const MyComponent = ({show, onClick}) => {  return show ? (    <div>      Do something awesome here      <button onClick={onClick}>Ok</button>    </div>  ) : null};const mapStateToProps = (state) => ({  show: state.showMyCompoent});const mapDispatchToProps = (dispatch) => ({    onClick: () => dispatch({      type: 'SHOW_MY_COMPONENT', payload: false    })  });export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);//Reducerconst initialState = {  showMyComponent: false  showSomeOtherComponent: false};export default (state = initialState, action) => {  switch (action.type) {    case 'SHOW_MY_COMPONENT':      return {...state, showMyComponent: action.payload};    case 'SHOW_SOME_OTHER_COMPONENT':      return {...state, showSomeOtherComponent: action.payload};    default:      return state;  }};//to show the component we would need to dispatch the following:dispatch({type: 'SHOW_MY_COMPONENT', payload: true});
load more v

import React, { Component } from 'react'  ,export class Toggle extends Component {  ,import React, { Component } from "react";  

 Pretag team - issue, fix, solve, resolve

We can toggle this CSS class using state that is toggled within the onClick of a button (the hamburger), choosing to add a class or not with a ternary condition className={open ? "open" : null}.,We can also use React Testing Library to check if an element has a certain CSS class or not. In the example below, our nav is originally hidden, which means that it doesn't have the open class, but after toggling state by clicking on the hamburger menu, we can verify that it correctly has the open class.,Along the same theme as modifying style attributes, we can modify which class an element has, giving us the ability to control an element's display, opacity, or even hiding it off the side of the screen as might be done with a hamburger menu when it is in its closed state.

Because this if statement is not embedded inside of JSX but is just part of the regular JavaScript portion of the function, you are free to use any sort of JS construct that you like. In this example, if the product is not available, we're just going to return null.

const AddToCart = ({ available }) => {
  if (!available) return null;

  return (
    <div className="full tr">
      <button className="product--cart-button">Add to Cart</button>
load more v

In this Blog, I will learn you how to hide and show div on click button in ReactJs.This example is focused on reactjs show hide div on click. we will help you to give example of how to hide and show div in react i would like to show you react hide and show div. ,I explained simply about reactjs hide show div Follow bellow tutorial step of hide and show div on button click in react js. ,Hide,Show and Toggle In ReactJs

import React from 'react';
import logo from './logo.svg';
import './App.css';

class App extends React.Component{
    return (
      <div className="App">
        <header className="App-header">
         <div><h1>Hide and Show</h1></div> : null
              <button onClick={()=>{this.setState({show:!})}}>{ 'Hide' : 'Show'} Div</button>

export default App;


To implement such functionality of showing and hiding components we should have some id, some key values, by using those values we can modify the visibility of the components in our UI using different operators that work on certain conditions.,When we click the click event button it simply updates the value of variables by sending the string as an input for which case that button has been clicked and based on the value updated in the variables it will decide that whether that component has to be shown or hidden. Using a similar method we can also hide or show elements also in ReactJS.,Now it’s time to merge all these child JS files into the main parent file where we can set some particular conditions to show or hide some particular components. So let’s create the main file name App.js and paste the following code into it.

Step 1: Create a React application using the following command:

npx create - react - app foldername
load more v

Let’s say we have a component called Demo1, and we want to hide it based on the Boolean value true/false. We can use different conditional operators to achieve this functionality.,Create three different files called Demo1.js, Demo2.js, and Demo3.js, and paste the following lines of source code into them:,To show or hide any component using any condition, we should have the values, and based on those values, we can hide or show a component using different conditional operators.

1import React, { Component } from "react";
3class Demo1 extends Component {
4  constructor() {
5    super();
6    this.state = {
7      name: "React"
8    };
9  }
11  render() {
12    return <div>This is Demo1 component</div>;
13  }
16export default Demo1;
load more v

Other "react-button" queries related to "React-Redux - Toogle a button to show and hide details"