CODEWITHSUNDEEP
reactjs
setiawan wawan
setiawan wawan

Reputation: 131

TypeError: Unable to get property 'text' of undefined or null reference

import React from 'react';

const seasonConfig = {
    summer: {
        text: 'lets hit the beach',
        iconName: 'sun'
    },
    winter: {
        text: 'Burr it is cold',
        iconName: 'snowflake'
    }
};

const getSeason = (lat, month) => {
    if (month > 2 && month < 9){
        return lat > 0 ? 'Summer' : 'Winter';
    } else {
        return lat > 0 ? 'Winter' : 'Summer';
    }
};

// Ternary Expression 
const SeasonsDisplay = props => {
    const season = getSeason(props.lat, new Date().getMonth());
    const {text, iconName } = seasonConfig[season];

    return (
        <div>
            <i className={`${iconName} icon`} />
                {text}
            <i className={`${iconName} icon`} />
        </div>
    ); 
};

export default SeasonsDisplay;

I try to extracing options to config object in ReactJS how to solve it? the error : TypeError: Unable to get property 'text' of undefined or null reference

Upvotes: 0

Views: 541

Answers (2)

Kannan G
Kannan G

Reputation: 1004

const getSeason = (lat, month) => {
  if (month > 2 && month < 9) {
    return lat > 0 ? "summer" : "winter";
  } else {
    return lat > 0 ? "winter" : "summer";
  }
};

seasonConfig[season] expects smaller case - "summer" and "winter"

Upvotes: 0

helloitsjoe
helloitsjoe

Reputation: 6529

seasonConfig[season] is expecting season to be lowercase summer or winter, but getSeason returns Title Case 'Summer' or 'Winter'. If you make getSeason return lowercase strings this should solve your problem.

Upvotes: 1

Related Questions