Mapping Object Data from ReduxPromise

Question

Trying to map an object that was returned from a promise, i am using react-router 4 and redux, redux-promise. the data has been returned as a promise but i cant seem to map it. If i remember correctly, the render() returns the renderBanner function and renders it there but i am a little unsure of how to map this data as i want to just grab the img and map it.

edit: example (uses different api but same process)

component file

import React, { Component } from 'react';
import { Grid, Image } from 'react-bootstrap';
// import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

import { fetchAdverts } from '../actions/adverts_action';

class FullWidthBannerAd extends Component {
  componentDidMount(props) {
    this.props.fetchAdverts();
  }

  constructor(props) {
    super(props)
    // this.state = {
    //   data: []
    // };
    console.log('Props Contains:', props);
  };

  renderBanner(props) {
    console.log('renderBanner Contains:', props);
    return (
      <div>
        hello
      </div>
    )
  }

  render() {
    return (
      <Grid>
        {this.renderBanner()}
      </Grid>
    );
  }
}

function mapStateToProps(state) {
  return {
    adverts: state.adverts
  };
}

export default connect(fetchAdverts)(FullWidthBannerAd);

promise returned

[,…]
0
:{_id: "57bf06e2ad5f52130098ae1c", sort_order: null, img: "e670cf43-9ed7-45f4-987d-d899af472f4c.jpg",…}
_id:"57bf06e2ad5f52130098ae1c"
img:"e670cf43-9ed7-45f4-987d-d899af472f4c.jpg"

so your promise returned data is an array which includes objects and each object has an image which you want to get? — Gayane, Apr 03 '17 at 13:24
in your render() you can check if theres is this.props.data, call return renderBanner, if not return null, and in renderBanner function everything is correct, you can return — Gayane, Apr 03 '17 at 13:33
updated post. when i console log the constructor an object is send back with a payload of data however when using the renderBanner and logging props i get back undefined, if its coming back undefined does that mean the mapping will not work — Nicholas Ritson, Apr 03 '17 at 13:54
ive added a repo that uses a different api for its data but same principle and same issue. constructor can see props but has no state data and renderBanner cannot see either: https://github.com/KadenLag/ows — Nicholas Ritson, Apr 03 '17 at 14:30
first of all, componentDidMount doesn't have an argument props, and also in your renderBanner function you don't have any props. in react if you want to get props outside of constructor you call this.props, because your component is a class. So, the answer of your question is write this.props not props in your function, and remove props argument from componentDidMount() — Gayane, Apr 03 '17 at 21:23

score 0 · Answer 1 · answered Apr 03 '17 at 21:28

import React, { Component } from 'react';
import { Grid, Image } from 'react-bootstrap';
// import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

import { fetchAdverts } from '../actions/adverts_action';

class FullWidthBannerAd extends Component {
  constructor(props) {
    super(props)
    // this.state = {
    //   data: []
    // };
    console.log('Props Contains:', props);
  };
  
   componentDidMount() {
    console.log(this.props);
    this.props.fetchAdverts();
  }

  renderBanner() {
    console.log('renderBanner Contains:', this.props);
    return (
      <div>
        hello
      </div>
    )
  }

  render() {
    return (
      <Grid>
        {this.renderBanner()}
      </Grid>
    );
  }
}

change your code to this. hope this will help you

that brings it in, but im having a problem with mapping it, when i console.log this.props.payload i get [[PromiseValue]] then my data which has 3 objects 0, 1, 2 inside with a image property which i am trying to get. how do i map through the [[PromiseValue]] if i try console.log the data with this.props.payload.data it comes back undefined — Nicholas Ritson, Apr 04 '17 at 11:58

Mapping Object Data from ReduxPromise

1 Answers1