React props: Unable to access key in object in array with index both passed with props

Question

I am working on a React project in which I am trying to access a key in an object that is an element in an array using an index, but am getting undefined.

The issue seems to be that I am getting an array of objects as props and the index as props as well. When I try to access the id or publicid of the objects in the array using an index from props, I get the error. Below is the simplified version of what I am getting.

Why is this happening and how can I resolve this?

console.log(this.props.images);
// [{id: 1, publicid: "1234" }, {id: 2, publicid: "5678"}]

console.log(this.props.imageIndex)
// 0

console.log(this.props.images[0].publicid)
// 1234

console.log(this.props.images[this.props.imageIndex])
// {id: 1, publicid: "1234" }

console.log(this.props.images[this.props.imageIndex].publicid)
// Cannot read property 'publicid' of undefined

** Updated with more code **

import React, { Component } from 'react';
import { connect } from 'react-redux';
import _ from 'lodash';

import * as actions from '../../actions';

class ImageBox extends Component {

  handleClick() {
    console.log('handleClose:');
  }

  renderImages() {
      console.log(this.props.imageIndex);
      // index logs okay
      console.log(this.props.images[0]);
      // shows correct object in the array
      console.log(this.props.images[this.props.imageIndex]);
      // again shows correct object in array
      console.log(this.props.images[this.props.imageIndex].publicid);
      // TypeError: Cannot read property 'publicid' of undefined

      return (
        <div onClick={this.handleClick.bind(this)}>
          <div className="image-box-content">
          </div>
        </div>
      );
    }
  }

  render() {
    return (
      <div>
        {this.renderImages()}
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    auth: state.auth,
    successMessage: state.auth.success,
    errorMessage: state.auth.error,
  };
}


export default connect(mapStateToProps, actions)(ImageBox);

You might want to post more of your React code, because there's nothing wrong with what you posted assuming the props are OK at the moment you read them. — Christopher Francisco
– Christopher Francisco, Commented Jun 12, 2018 at 3:23
Are you sure the console.log is one after another and there is no any other code in between of them? — Isaac
– Isaac, Commented Jun 12, 2018 at 3:24

Rohith Murali · Accepted Answer · 2018-06-12 11:10:42Z

2

Try rendering conditionally, since its called inside the render, it might be because initial value of props doesn't have this value.

renderImages() {
      console.log(this.props.imageIndex);
      // index logs okay
      console.log(this.props.images[0]);
      // shows correct object in the array
      console.log(this.props.images[this.props.imageIndex]);
      // again shows correct object in array
      if(this.props.images[this.props.imageIndex])
      console.log(this.props.images[this.props.imageIndex].publicid);
      // TypeError: Cannot read property 'publicid' of undefined

      return (
        <div onClick={this.handleClick.bind(this)}>
          <div className="image-box-content">
          </div>
        </div>
      );
    }
  }

answered Jun 12, 2018 at 11:10

Rohith Murali

5,6692 gold badges27 silver badges28 bronze badges

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

1 Comment

bigmugcup Over a year ago

That works. Checked for existence of this.props.imageIndex and it worked. Somehow it was an empty object when it had no value so checked if empty.

Isaac · Accepted Answer · 2018-06-12 03:30:47Z

0

let images = [{id: 1, publicid: "1234" }, {id: 2, publicid: "5678"}];
let imageIndex = 0;

console.log(images);
// [{id: 1, publicid: "1234" }, {id: 2, publicid: "5678"}]

console.log(imageIndex)
// 0

console.log(images[0].publicid)
// 1234

console.log(images[imageIndex])
// {id: 1, publicid: "1234" }

console.log(images[imageIndex].publicid)
// Cannot read property 'publicid' of undefined

I've removed only this.props from your code to prove that your code is totally working fine. There must be some other code in between your console.log and perhaps you would need to share more of them

answered Jun 12, 2018 at 3:30

Isaac

13k18 gold badges66 silver badges135 bronze badges

2 Comments

bigmugcup Over a year ago

I agree this should be quite simple which is why I am perplexed by this. I have to think that this is some quirk in React props. I put up the code for the component. It's quite simple as I was just starting to build it out by making sure the props are passed okay. But it is not.

bigmugcup Over a year ago

Unfortunately, I am not in position to share the entire code base. The entire code for the component is above. There is some thing with props that does not enable direct access of props array object with props index...

Collectives™ on Stack Overflow

React props: Unable to access key in object in array with index both passed with props

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related