Unable to display data of second array based on values of first array

Question

I am new to react , Below is state and render method for a component that has to display data of this.state.numberOfStarList based on "item.full_name" , but I am getting error - Cannot read property 'state' of undefined

this.state = {
  error: null,
  isLoaded: false,
  numberOfStarList: [],
  objectDetails: []
};

render() {
    return (
      <div className="container">
        {this.state.objectDetails.map(function(item) {
          return (
            <div className="col-md-6" key={item.full_name}>
              <div className="card">
                <img
                  className="card-img-top"
                  src={item.loggedInAvatar_url}
                  alt="user"
                />
                <div className="card-body">
                  <a
                    className="card-title"
                    href={item.html_url}
                    target="_blank"
                  >
                    <span>{item.full_name}</span>
                  </a>
                  <br />
                  <a
                    className="card-text"
                    href={item.loggedInHtmlUrl}
                    target="_blank"
                  >
                    <span>{item.loggedInOwner}</span>
                  </a>
                </div>
              </div>
 {this.state.numberOfStarList.map(function(star){
                    return (
                        <h1>{star.key}</h1>
                    )
                })}
            </div>

          )
        })}

      </div>
    );

Use `.bind(this)` if you are not using arrow functions after the `}` of your first map callback. — Tobias K., Aug 16 '18 at 19:08
Possible duplicate of ["this" is undefined inside map function Reactjs](https://stackoverflow.com/questions/30148827/this-is-undefined-inside-map-function-reactjs) — Tobias K., Aug 17 '18 at 05:35
Thanx ,It helped, but i am getting some weird output - while iterating - "this.state.numberOfStarList", for first object keys of parent array are coming fine like 0, 1, 2,3 but for second object of "this.state.numberOfStarList" keys are coming like - 0,0, 1,1,2,2,3,3. Any suggestion? Is there any ckeck we have to apply — userName, Aug 18 '18 at 19:54

score 0 · Answer 1 · edited Aug 16 '18 at 19:32

Because you should define your states in the constructor and bind this for your function like the following:

constructor(props){
   super(props);
   this.state = {
     error: null,
     isLoaded: false,
     numberOfStarList: [],
     objectDetails: []
   };
}

render() {
    return (
      <div className="container">
        {this.state.objectDetails.map((item) => {
          return (
            <div className="col-md-6" key={item.full_name}>
              <div className="card">
                <img
                  className="card-img-top"
                  src={item.loggedInAvatar_url}
                  alt="user"
                />
                <div className="card-body">
                  <a
                    className="card-title"
                    href={item.html_url}
                    target="_blank"
                  >
                    <span>{item.full_name}</span>
                  </a>
                  <br />
                  <a
                    className="card-text"
                    href={item.loggedInHtmlUrl}
                    target="_blank"
                  >
                    <span>{item.loggedInOwner}</span>
                  </a>
                </div>
              </div>
 {this.state.numberOfStarList.map((star) => {
                    return (
                        <h1>{star.key}</h1>
                    )
                })}
            </div>

          )
        })}

      </div>
    );

score 0 · Answer 2 · answered Aug 16 '18 at 19:39

I believe that your confusion might be due to state being able to be declared in two ways.

1. Within constructor

Then you would need to use this.

class Foo extends Component {
    constructor(props) {
        //  this is important as it makes other methods access props like `this.props...`
        super(props);    

        this.state = {
            error: null,
            isLoaded: false,
            numberOfStarList: [],
            objectDetails: []
        }
    } 

    render () {...}
}

2. Declare state as a class instance variable

If you declare the state as a class instance variable (outside of constructor),
then you don't need this.

class Foo extends Component {
    state = {
        error: null,
        isLoaded: false,
        numberOfStarList: [],
        objectDetails: []
    }

    render () {...}
}

So the gist is, if you are declaring the state outside of constructor, then you don't need this.

If you are using webpack, you need a Babel plugin, babel-plugin-transform-class-properties, to enable class instance variable transpilation.

Unable to display data of second array based on values of first array

2 Answers2

1. Within constructor

2. Declare state as a class instance variable