React Redux: How do I map two objects to each correctly rendered child component using mapStateToProps and mapDispatchToProps?

Asked

Viewed 26 times

1

A child component is rendered by map in the parent component... Via props, in the child component, I receive two objects and I would like that data to be rendered in the right component that is mapped. I don’t have much familiarity with Redux and wanted to know how each component loads its data correctly. (In Cód below it only renders in the two components the database data that is last passed in mapStateToProps and mapDispatchToProps)

class DashboardCard extends Component{

    componentWillMount(){   
        this.props.emailList(),
        this.props.bancoList() 
    }

    renderRows = list => {
        let result = null
        if (list.length > 0 ){
        result = list.map((em) => {
          
        return <tr key={em.id}>
                <td>{em.data}</td>
                <td>{em.saida}</td>
                <td>
                {em.sucess === true && <span className='label label-success'>OK</span>}
                {em.sucess === false && <span className='label label-danger'>ERROR</span>}
                </td>  
            </tr>
            })
        }
        return result
    }

    filterList = () => {
        const { list } = this.props
        let filterItemList = []
        filterItemList = list.slice(0, 2)
        return filterItemList
    }

    render(){

        if (this.props.title === "Email") {
            this.filterList();
        } else if (this.props.title === "Banco") {
            this.filterList();
        }
        
        return(

                <div className="col-md-6">
                    <div className="box box-info">
                            <div className="box-header with-border">
                                <h3 className="box-title">{this.props.title}</h3>
                            </div>
                        <div className="box-body">
                        <div className="table-responsive">
                            <table className='table no-margin'>
                                <thead>
                                    <tr>
                                        <th>Data</th>
                                        <th>Retorno do sistema</th>
                                        <th>Sucess</th>
                                    </tr>
                                </thead>
                                <tbody >
                                    {this.renderRows(this.filterList())}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>  
        )
    }
}

const mapStateToProps = state =>({ list: state.email.list , list: state.banco.list })
const mapDispatchToProps = dispatch => bindActionCreators({emailList, bancoList}, dispatch)
export default connect(mapStateToProps, mapDispatchToProps)(DashboardCard )
No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.