Getting referrence error while creating new array of object from existing array of objects?

Question

I have an array of image urls and I am trying to create a new object which should look like this: source: { uri: 'http://i.imgur.com/XP2BE7q.jpg' }

So I have used reduce() to do that. Now I want that modified imageArray and assign it state variable called images (which must be an array) but I am getting reference error imageArray not defined why so?

I want to assign newly created imageArray to the state variable, how can I do that? Currently, I am getting reference Error should I move reduce() operation outside the class component.

Code:

export default class ImageView extends Component {
  constructor(props) {
    super(props);
    this.state = {
      index: 0,
      images: imageArray
    };
  }
  render() {
    const imageArray = this.props.images.reduce((acc, images) => {
      let temp = {
        source: {
          uri: images
        }
      };

      acc.push(temp);
      return acc;
    }, []);
    console.log(imageArray);
    return <View style={{ flex: 1 }} />;
  }
}

In the constructor you reference imageArray which is not defined yet. Instead initialize the images in the state with an empty array and in componentDitMount create the imageArray and setState with it. — Tarek Essam
– Tarek Essam, Commented Oct 5, 2018 at 15:05

Tu Nguyen · Accepted Answer · 2018-10-05 15:18:40Z

1

Give this a try:

export default class ImageView extends Component {
  constructor(props) {
    super(props);
    this.state = {
      index: 0,
      images: []
    };
  }
  componentDidMount() {
    const imageArray = this.props.images.reduce((acc, images) => {
      let temp = {
        source: {
          uri: images
        }
      };

      acc.push(temp);
      return acc;
    }, []);

    this.setState({ images: imageArray });
  }
  render() {
    return <View style={{ flex: 1 }} />;
  }
}

edited Oct 5, 2018 at 15:18

answered Oct 5, 2018 at 15:10

Tu Nguyen

10.2k4 gold badges30 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

fun joker Over a year ago

@Nguyen If I move the code outside class component I am getting undefined images on which I am mapping why so ? see this -> imgur.com/a/bSx0muV

Tu Nguyen Over a year ago

Nope! Outside class component won't work for sure :)

fun joker Over a year ago

@Nguyen Why what is the reason ?

Tu Nguyen Over a year ago

Because we're trying to get the value of the images property from the props object :) the props object is only accessible inside the instance of a class component.

fun joker Over a year ago

@Nguyen Sorry your code is working fine you previously you used componentDidMounted instead of componentDidMount :)

larz · Accepted Answer · 2018-10-05 15:10:51Z

1

You're defining imageArray inside your render method, which is outside the scope of your constructor. I suggest calling this.setState({ images: imageArray }); after you define image array, which should NOT be happening inside the render method. Initialize state.images as an empty array. In componentDidMount, reduce your this.props.images and then call setState.

edited Oct 5, 2018 at 15:10

answered Oct 5, 2018 at 15:04

larz

5,7662 gold badges13 silver badges23 bronze badges

3 Comments

fun joker Over a year ago

@Iarz Should I remove reduce() outside class component ? but then will this.props.images will work ?

larz Over a year ago

You have access to your props anywhere. I'm going to amend my initial response and suggest that you set images to an empty array in your constructor, and then in componentDidMount, do your this.props.images.reduce magic and use setState to update the state.

fun joker Over a year ago

If I move the code outside class component I am getting undefined images on which I am mapping why so ? see this -> imgur.com/a/bSx0muV

Collectives™ on Stack Overflow

Getting referrence error while creating new array of object from existing array of objects?

2 Answers 2

5 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related