CODEWITHSUNDEEP
reactjsdictionaryecmascript-6jsx
Jose Cabrera Zuniga
Jose Cabrera Zuniga

Reputation: 2613

maps with react components

I have the next code:

 const compsMap = new Map([
    ['id',          <TableHeaderColumn dataField={'id'} width='50' isKey autoValue={true} dataAlign='left' dataSort >{'id'}</TableHeaderColumn>],
    ['firstName',   <TableHeaderColumn dataField={'firstName'} dataSort headerAlign='left' editable={JSON.parse('{"type": "textarea" }')}>{'First Name'}</TableHeaderColumn>],
    ['lastName',    <TableHeaderColumn dataField={'lastName'} dataSort headerAlign='left'  editable={JSON.parse('{"type": "textarea" }')}>{'Last Name'}</TableHeaderColumn>],
    ['mobile',      <TableHeaderColumn dataField={'mobile'} dataSort headerAlign='left'    editable={JSON.parse('{"type": "textarea" }')}>{'Mobile'}</TableHeaderColumn>],
    ['username',    <TableHeaderColumn dataField={'username'} dataSort headerAlign='left'  editable={JSON.parse('{"type": "textarea" }')}>{'Username'}</TableHeaderColumn>],
    ['password',    <TableHeaderColumn dataField={'password'} dataSort headerAlign='left'  editable={JSON.parse('{"type": "textarea" }')}>{'Password'}</TableHeaderColumn>],
]); 

console.log('compsMap[id] = ' + compsMap['id']);

why I get compsMap['id'] as Undefined?

Please, assume that each

<TableHeaderColumn... > ... </TableHeaderColumn>

is well defined

Upvotes: 0

Views: 66

Answers (2)

Mayank Shukla
Mayank Shukla

Reputation: 104379

Use compsMap.get(key) to get the value.

Check this example:

const compsMap = new Map([
    ['id', "<TableHeaderColumn dataField={'id'} width='50' isKey autoValue={true} dataAlign='left' dataSort >{'id'}</TableHeaderColumn>"],
    ['firstName', "<TableHeaderColumn dataField={'firstName'} dataSort headerAlign='left' editable={JSON.parse('{type: 'textarea' }')}>{'First Name'}</TableHeaderColumn>"],
    ['lastName', "<TableHeaderColumn dataField={'lastName'} dataSort headerAlign='left'  editable={JSON.parse('{'type': 'textarea' }')}>{'Last Name'}</TableHeaderColumn>"],
    ['mobile',  "<TableHeaderColumn dataField={'mobile'} dataSort headerAlign='left'    editable={JSON.parse('{'type': 'textarea' }')}>{'Mobile'}</TableHeaderColumn>"],
    ['username', "<TableHeaderColumn dataField={'username'} dataSort headerAlign='left'  editable={JSON.parse('{'type': 'textarea' }')}>{'Username'}</TableHeaderColumn>"]
]); 

console.log('compsMap[id] = ', compsMap.get('id'));

Upvotes: 2

Chaim Friedman
Chaim Friedman

Reputation: 6253

Your issue is in the way you are trying to get at your data. Consider the following example

let map = new Map([
  ['id', 'foobar']
]);

console.log(map['id']) //undefined

vs 

let map = new Map([
  ['id', 'foobar']
]);

console.log(map.get('id')) // 'foobar'

Hope this helps.

Upvotes: 1

Related Questions