javascript - React-Redux - Toogle a button to show and hide details - Stack Overflow

admin管理员组

文章数量:1430127

I'm making a portfolio and when I click the details button, I show the details about that specific work, what I want to do next is to hide de details when I don't want to see them anymore, for that o think I need to make my button a toggle button to hide and show the details.

I'm new to React and Redux, and I'm learning.

This is my GitHub Repository

You can start the server just making an npm start.

Once again the objective is to make a toggle button to hide and show de details, i stuck whit it and i cant go any further .

Could some one help me ?

This is my miristica.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { selectTrabalho } from '../../actions/index';
import TrabalhoMiristica from './detalhe_miristica';


class Miristica extends Component {

renderList(){

    return this.props.trabalho_m.map((trabalho) => {
        return (
            <li>
                <div className="row list-group">
                    <div className="col-md-4">
                        <img src={trabalho.img} />
                    </div>
                    <div className="col-md-8">
                        <h3>{trabalho.title}</h3>
                        <p>{trabalho.descricao}</p>
                        <button key={trabalho.id} onClick={() => this.props.selectTrabalho(trabalho)} type="button" className="btn btn-info">Detalhes</button>
                        <br/>
                        <br/>
                        <TrabalhoMiristica/>
                    </div>
                </div>
            </li>
        );
    })
}

render() {

return (

    <ul className="list-group col-ms-4"> 
        {this.renderList()}
    </ul>

   );

  }
}


function mapStateToProps(state) {

return {
    trabalho_m: state.trabalho_m
};
}

function mapDispatchToProps(dispatch) {

return bindActionCreators({ selectTrabalho: selectTrabalho }, dispatch)
}


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

This is my detail .js , the one i want to hide and show

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

class TrabalhoMiristica extends Component {
render() {
    if (!this.props.trabalho) {
        return <div></div>;
    }

    return (
        <div>
            <div>{this.props.trabalho.tec}</div>
        </div>
    );
    }
 }

function mapStateToProps(state){
return {
    trabalho: state.activeMiristica
};
}


export default connect(mapStateToProps)(TrabalhoMiristica);

If you guys need more information please tell me.

Thanks in advance

I'm making a portfolio and when I click the details button, I show the details about that specific work, what I want to do next is to hide de details when I don't want to see them anymore, for that o think I need to make my button a toggle button to hide and show the details.

I'm new to React and Redux, and I'm learning.

This is my GitHub Repository

https://github./hseleiro/PortBeta

You can start the server just making an npm start.

Once again the objective is to make a toggle button to hide and show de details, i stuck whit it and i cant go any further .

Could some one help me ?

This is my miristica.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { selectTrabalho } from '../../actions/index';
import TrabalhoMiristica from './detalhe_miristica';


class Miristica extends Component {

renderList(){

    return this.props.trabalho_m.map((trabalho) => {
        return (
            <li>
                <div className="row list-group">
                    <div className="col-md-4">
                        <img src={trabalho.img} />
                    </div>
                    <div className="col-md-8">
                        <h3>{trabalho.title}</h3>
                        <p>{trabalho.descricao}</p>
                        <button key={trabalho.id} onClick={() => this.props.selectTrabalho(trabalho)} type="button" className="btn btn-info">Detalhes</button>
                        <br/>
                        <br/>
                        <TrabalhoMiristica/>
                    </div>
                </div>
            </li>
        );
    })
}

render() {

return (

    <ul className="list-group col-ms-4"> 
        {this.renderList()}
    </ul>

   );

  }
}


function mapStateToProps(state) {

return {
    trabalho_m: state.trabalho_m
};
}

function mapDispatchToProps(dispatch) {

return bindActionCreators({ selectTrabalho: selectTrabalho }, dispatch)
}


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

This is my detail .js , the one i want to hide and show

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

class TrabalhoMiristica extends Component {
render() {
    if (!this.props.trabalho) {
        return <div></div>;
    }

    return (
        <div>
            <div>{this.props.trabalho.tec}</div>
        </div>
    );
    }
 }

function mapStateToProps(state){
return {
    trabalho: state.activeMiristica
};
}


export default connect(mapStateToProps)(TrabalhoMiristica);

If you guys need more information please tell me.

Thanks in advance

• javascript
• reactjs
• redux
• react-redux

Share Improve this question Follow edited May 30, 2020 at 20:26 norbitrial 15.2k1010 gold badges3939 silver badges6464 bronze badges asked Oct 17, 2016 at 10:58 Hugo SeleiroHugo Seleiro 2,63866 gold badges3030 silver badges4444 bronze badges 2

• read show or hide element in react.js. it will helps to di it in React. – Damien Leroux Commented Oct 17, 2016 at 11:41
• Thanks for the help – Hugo Seleiro Commented Oct 17, 2016 at 18:11

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

So, you have Redux store with app state, and local state of ponent. One option - you could store local state in React ponent, and work with it like you always do, using setState. It's a good option if your app simple and you don't need to have access to the ponent's local state from elsewhere.

But, if you have big app, and use Redux, another option - have ponent state in store, and use Redux actions to work with it. This way you could have global state, accessible from another ponents.

Take a look at Redux-UI or Redux Fractal, which could help you with that. This libs take care of storing local ponents state in store and give you helpers to work with that state on ponent level.

So you could have something like this:

ui({state: {showDescription: false}})(connect(mapStateToProps)(TrabalhoMiristica))

And use function updateUI('showDescription', true) somewhere in ponent. Component state would be available in this.props.ui.showDescription.

For more plicated cases you could dispatch actions like always, and catch them in Redux UI, thus modifying state from there.

Redux UI has not the best docs, but looking in tests folder could help.

In most simple case you could have store with your, em, cards, for example:

const cards = {
    cardID1: {
        title: 'some title',
        description: 'some description',
        expanded: false
    }
    ...
}

And have action like this:

const toggleDescription = (id) => {type: 'TOGGLE_DESCRIPTION', id};

And check this in reducer, toggling expand property by card id:

const reducer = (state, action) => {
     if (action.type === 'TOGGLE_DESCRIPTION') {
          // you have action.id here from action creator,
          // and state, where you can get card you need by that id,
          // change expanded property and return new state
     }
}

本文标签： javascriptReactReduxToogle a button to show and hide detailsStack Overflow