[ReactJS]

Um componente filho é renderizado por map no componente pai... Via props, no componente filho, eu recebo dois objetos e gostaria que esses dados fossem renderizados no componente certo que é mapeado. Não tenho muita familiraridade com Redux e queria saber como cada componente carrega seus dados corretamente. (No cód abaixo ele só renderiza nos dois componentes os dados do banco que é passado por último no mapStateToProps e 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 )

Continue reading...