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 )