Not able to access array element in react

Question

I am receiving a json data of single student from the server. Here i can easily get this.state.info.Firstname but i can not able to access this.state.info.Father.Firstname. How can i access this??

this is my react code:

import React from 'react';
import axios from 'axios';

class Information extends React.Component{
    constructor(props){
        super(props);
        this.state={
            info:' '
        }
    }

    componentDidMount(){
        let self = this;
        axios.get('http://localhost:8080/studentById')
            .then(function(data) {
                //console.log(data);
                self.setState({info:data.data});
            });
    }

    render(){
        return(
            <div>
                <pre>
                  <ul>
                    <li>{this.state.info.Firstname}</li>
                    <li>{this.state.info.Lastname}</li>
                    <li>{this.state.info.DateOfBirth}</li>
                    <li>{this.state.info.PlaceOfBirth}</li>
                    <li>{this.state.info.Age}</li>
                    <li>{this.state.info.Months}</li>
                    <li>{this.state.info.Nationality}</li>
                    <li>{this.state.info.MotherTongue}</li>
                    <li>{this.state.info.BloodGroup}</li>
                    <li>{this.state.info.Father.Firstname}</li>                
                  </ul>
                </pre>
            </div>);
    }
}
export default Information;

this is my json data:

{ _id: 5899b77c0ce1d10b723ab4ac,
  Id: 92,
  Firstname: 'Surya',
  Age: 11,
  Lastname: 'G',
  DateOfBirth: '11-11-11',
  PlaceOfBirth: 'Bangalore',
  Months: 2,
  Nationality: 'Indian',
  MotherTongue: 'Kannada',
  BloodGroup: 'B+ve',
  ResidentialAddress: 'Vijayanagar 3rd cross, Bangalore',
  EmergencyContactNumber: 
   { Address: 'SIT',
     PhoneNo1: 1234,
     PhoneNo2: 123455,
     Relationship1: 'Uncle',
     Relationship2: 'Aunty' },
  Mother: 
   { Firstname: 'Joe',
     Lastname: 'S',
     Occupation: 'Business',
     PlaceOfWork: 'Bangalore',
     OfficialAddress: 'Jayanagar',
     EmailId: '[email protected]',
     PhoneNo: 12345,
     MobileNo: 1234567890 },
  Father: 
   { Firstname: 'Chandra',
     Lastname: 'S',
     Occupation: 'Business',
     PlaceOfWork: 'Bangalore',
     OfficialAddress: 'BTM',
     EmailId: '[email protected]',
     PhoneNo: 12345,
     MobileNo: 1234567890 } }

r u getting any error, when using this.state.info.Father.Fullname ?? — Mayank Shukla
– Mayank Shukla, Commented Feb 13, 2017 at 11:05
yes..like this i am getting : Cannot read property 'Firstname' of undefined — Abhilash Muttalli
– Abhilash Muttalli, Commented Feb 13, 2017 at 11:08

Mayank Shukla · Accepted Answer · 2017-02-13 11:15:31Z

1

Reason is, you defined info='' in state, and fetching the data from server. You are updating the info value once you get the data from server. You are making the api call in componentDidMount method, that used to get called after component is mounted successfully. When it tries to render {this.state.info.Father.Firstname}, before you got the response, it is throwing the error because value of info is '' at that time, so you need to put a check in render method and wait until you didn't get the response, Use this it will work:

return(
    <div>
        {this.state.info != '' ?
            <pre>
              <ul>
                <li>{this.state.info.Firstname}</li>
                <li>{this.state.info.Lastname}</li>
                <li>{this.state.info.DateOfBirth}</li>
                <li>{this.state.info.PlaceOfBirth}</li>
                <li>{this.state.info.Age}</li>
                <li>{this.state.info.Months}</li>
                <li>{this.state.info.Nationality}</li>
                <li>{this.state.info.MotherTongue}</li>
                <li>{this.state.info.BloodGroup}</li>
                <li>{this.state.info.Father.Firstname}</li>
              </ul>
            </pre>
            :
            null
        }
    </div>
)

edited Feb 13, 2017 at 11:15

answered Feb 13, 2017 at 11:11

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

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

3 Comments

Mayank Shukla Over a year ago

u defined info:' ', instead of that define it like this: info:'' or change the condition i used, use it like {this.state.info!= ' '} . use the same value in condition that u defined in constructor.

Abhilash Muttalli Over a year ago

Thanks bro. Can u explain wat was the problem?

Mayank Shukla Over a year ago

plz check the answer for explanation, reason is, initial value of info='', and you were trying to access the Father.Firstname, this.state.info.Father was undefined, and you cant access any value of undefined. run this in console: a={}; console.log(a.b, a.b.c);

Goutham · Accepted Answer · 2017-02-15 05:35:26Z

0

The info state you are using should be a object ,you are using as a string, may be that caused the issue. Try using this . Rest all code remains the same.

` constructor(props){
        super(props);
        this.state={
            info: { }
        }
    }`

answered Feb 15, 2017 at 5:35

Goutham

3622 gold badges5 silver badges15 bronze badges

Collectives™ on Stack Overflow

Not able to access array element in react

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related