Back

Technologies:

javascriptjavascript
reactjsreactjs
avatar
Tolerim
25 days ago

The error message states that it is impossible to read properties of an undefined object, specifically the 'img' property.

Here is the modified paragraph: A structure of my React application files is shown below:


--React01
 |--node_modules
 |--public
  |--index.html
 |--src
  |--components
   |--App.js
   |--Header.js
   |--Team.js
   |--TeamMember.js
  |--index.js
 |--package-lock.json
 |--package-json
The following code shows the Team component:

import React from 'react';
import TeamMember from './TeamMember';

function Team(){
const info = [
    {   
        id: 1,
        img:'./images/img01.jpg',
        name:'Walter white 1',
        position: 'dev',
        website:'website',
        phone:'phone',
        email:'email',
        
    },
    {   
        id: 2,
        img:'./images/img02.jpg',
        name:'Walter white 2',
        position: 'dev',
        website:'website',
        phone:'phone',
        email:'email',
        
    }
]

const members = info.map(member => 
<TeamMember
    key={member.id}
    info={{img:member.img,name:member.name,position:member.position,website:member.website,phone:member.phone,email:member.email}}
    />);


    return(
        <div className='row'>
            {members}
        </div>
    )
}

export default Team;
The following code shows the TeamMember component:

import React from 'react';

function TeamMember(props){
    return(
    <div className='col-md-6'>
      <div className='card'>
        <div className='card-header'>
          <img style={{
            maxWidth:'100%',
            borderRadius:'7px',
            }} src={props.info.img}/>
         
        </div>
        <div className='card-body'>
            <h2>{props.info.name}</h2>
            <h5>{props.info.position}</h5>
            <div>{props.info.website}</div>
            <div>{props.info.phone}</div>
            <div>{props.info.email}</div>
        </div>
      </div>
    </div>
    )
}

export default TeamMember;
The error "TypeError: Cannot read properties of undefined (reading 'img')" is being thrown either in Team.js or TeamMember.js, but the solution is not yet clear.

Answers(2)
avatar
Vogi
24 days ago
Verified Answer
The error "TypeError: Cannot read properties of undefined (reading 'img')" is being thrown either in Team.js or TeamMember.js. This error occurs when you try to access a property of an object that is undefined. In this case, it seems that the img property is undefined. You can try to debug this error by checking if the info object is being passed correctly as a prop to the TeamMember component. You can also check if the img property exists in the info object by logging it to the console. If you are still having trouble resolving this error, you can refer to the following Stack Overflow threads for more information and solutions: - React - TypeError: Cannot read properties of undefined (reading 'params') - TypeError: Cannot read properties of undefined (reading 'img') React - Resolving TypeError: Cannot Read Property of Undefined in ... - Rollbar

Sources

Resolving TypeError: Cannot Read Property of Undefined in JavaScriptreactjs - React - TypeError: Cannot read properties of undefined ...TypeError: Cannot read properties of undefined (reading 'img') React
avatar
Tolerim
25 days ago
In the 'Team.js' component, the 'img', 'name', 'position', 'website', 'phone' and 'email' are passed to the 'TeamMember' component as individual props, but in the 'TeamMember.js' component, they are accessed as properties of the 'info' object which is not passed as a prop. To fix this issue, you should change the props received in 'TeamMember.js' component to access individual properties instead of an 'info' object. For example, change {props.info.img} to {props.img} in the 'TeamMember.js' component. Here's the corrected 'TeamMember.js' component: 
function TeamMember(props){
    return (
        <div className='col-md-6'>
            <div className='card'>
                <div className='card-header'>
                    <img style={{
                        maxWidth:'100%',
                        borderRadius:'7px',
                    }} src={props.img}/>
                </div>
                <div className='card-body'>
                    <h2>{props.name}</h2>
                    <h5>{props.position}</h5>
                    <div>{props.website}</div>
                    <div>{props.phone}</div>
                    <div>{props.email}</div>
                </div>
            </div>
        </div>
    )
}

export default TeamMember;
;