Can't read list entry in immutable record

Question

Im still a bit new to immutable records and lists but this is really perplexing to me. I have a record with a list in it. In the list there are 3 entries. Im able to access 2 of the 3 very simply using dot notation. But one of them seems to be undefined no matter what i do, even know i can see it in record in the component. Below is console log of the record in the stateless functional component where im trying to use it.

Here is the relevant record

console.log("PHOTO0::",competitor);

returns

console.log("PHOTOIMAG::",competitor.imageLink);

returns

PHOTOIMAG:: https://testcreative.co.uk/wp-content/uploads/2017/10/Test-Logo-Circle-black-transparent.png

and

console.log("PHOTOKEY::",competitor.key);

returns

PHOTOKEY:: -LCK49TfAVBPBATG1oxp

but

console.log("PHOTODESC::",competitor.description)

returns

PHOTODESC:: undefined

I've passed my props into my functional component and have wired up a proptype called competitor like so.

Photo.propTypes = {
competitor: PropTypes.object.isRequired
}

And in my function itself

function Photo({competitor}) {

so i can use dot notation on the entries in the return like so but it only works on ImageLink.

            <img className="photo" src={competitor.imageLink} alt={competitor.description} />

{competitor.imagLink} works. My photos render on the page. But i have no descriptions for them even though i can see they have descriptions entries in the record (above in the console image).

i have tried these which I shouldn't need because Im a Record.

console.log("PHOTODESC::",competitor.get('description'));
console.log("PHOTODESC::",competitor.getIn(["description",0]))

I just get 'undefined'. So it just seems strange i have no problems accessing the other entries but description. Am i not understanding something about these list entries in my immutable record and how i can use them?

Im React ^15.6.1, redux ^3.7.1, immutable ^3.8.1 using latest chrome browser. Have looked around and haven't been able to find similar issues on net. Any help greatly appreciated.

**Adding in requested code here******

My competitor reducer. This is mostly boiler plate from a todo so that could be my problem.

export const CompetitorsState = new Record({
deleted: null,
filter: '',
list: new List(),
previous: null
});

export function competitorsReducer(state = new CompetitorsState(), {payload, type}) {
 switch (type) {
case CREATE_COMPETITOR_SUCCESS:
  return state.merge({
    deleted: null,
    previous: null,
    list: state.deleted && state.deleted.key === payload.key ?
          state.previous :
          state.list.unshift(payload)
  });

case REMOVE_COMPETITOR_SUCCESS:
  return state.merge({
    deleted: payload,
    previous: state.list,
    list: state.list.filter(competitor => competitor.key !== payload.key)
  });

case FILTER_COMPETITORS:
  return state.set('filter', payload.filterType || '');

case LOAD_COMPETITORS_SUCCESS:
  return state.set('list', new List(payload));


default:
  return state;
}

Relevant actions

export const Competitor = new Record({
    decription: null,    
    imageLink: null,
    key: null,
});

export const competitorList = new FirebaseList({
    onAdd: createCompetitorSuccess,
    //onChange: updateTaskSuccess,
    onLoad: loadCompetitorsSuccess,
    onRemove: removeCompetitorSuccess
}, Competitor);




export function loadCompetitors() {
    return (dispatch, getState) => {
          const { auth } = getState();
          competitorList.path = `competitors/${auth.id}`;
          competitorList.subscribe(dispatch);
    };
}

export function loadCompetitorsSuccess(competitors) {
    return {
        type: types.LOAD_COMPETITORS_SUCCESS,
        payload: competitors
     };
}

export function createCompetitor(imageLink, description) {
      console.log("ACTION_CREATECOMESTART::", imageLink)
      console.log("ACTION_CREATECOMESTART2::", description)
      return dispatch => {
        competitorList.push({ description,imageLink })
        .catch(error => dispatch(createCompetitorError(error)));
      };
}

export function createCompetitorSuccess(competitor) {
    console.log("ACTION_CREATECOMESTARTSUCCESS::",competitor)
    return {
      type: types.CREATE_COMPETITOR_SUCCESS,
      payload: competitor
    };
 }

Answer 1

So I finally found it. It was a typo where I was instantiating my Record. I was missing a 's' in description in my Record which was messing up this whole thing.

this is what I had that was bad

export const Competitor = new Record({
decription: null,    
pic: null,
key: null,  
});

It should have been,

export const Competitor = new Record({
description: null,    
pic: null,
key: null,  
});

In this pic from my console log above it was there all along, I had missed it because I was entering into my database correctly and it showed in my list entries correctly.

Hope this helps someone in the future!