Component does not get called in mapping ReactJS

Question

The following is my piece of code where the inside component i.e. MultiSelectAssetDropdown does not get rendered. The console.log('comes here') doesn't come up, which clearly means that the loop isn't executing. However the prior console.log prints fine.. so I know this component is rendered. Also the component render after the loop executes perfectly fine.

<ul className="collapsible multiDropdownTag">
  { console.log('field',this.state.configDefaultVal)}
  { configDefaultVal.map(function (field) {
    console.log('comes here');
    return (
      <MultiSelectAssetDropdown placeholder="" icon=""
        label={field.defaultValues.DisplayName}
        value={field.selectedValues}
        disabled={this.state.disabledVal}
        selectedValues={field.selectedValues}
        className="multiselect"
        defaultValues={field.defaultValues.values}
        fieldValue="field1" id="field1"/>
    )}, this)
  }
  <MultiSelectAssetDropdown placeholder="" icon=""
    label="Sites"
    value={abc}
    siteId={this.state.details.siteId}
    disabled={this.state.disabledVal}
    selectedValues={abc}
    defaultValues={abc}
    fieldValue="sites" id="sites"/>
</ul>

Can somebody please point me in the right direction here? The array looks like : [field1: Array(0), field0: Array(0)] However when i do .length it gives 0

const finalFieldsArray = [];
                _.forEach(configVal,function(selField,key){
                    _.forEach(configDefaultVal,function(defField,keys){
                        if(key == keys){
                            finalFieldsArray[keys]=[];
                            finalFieldsArray[keys]['selectedValues'] = selField;
                            finalFieldsArray[keys]['defaultValues'] = defField;
                        }
                    })
                })

This finalFieldsArray is later set in state as configDefaultVal.

well... if the map function doesn't run could it be that there's nothing in the array? — John Ruddell
– John Ruddell, Commented Oct 23, 2018 at 7:27
@JohnRuddell apologies I will post the array as well as I get it in the console log — SHIKHAR SINGH
– SHIKHAR SINGH, Commented Oct 23, 2018 at 7:28
why dont you just post what it is? in the code. instead of these pointless console.logs — John Ruddell
– John Ruddell, Commented Oct 23, 2018 at 7:35

Kenzk447 · Accepted Answer · 2018-10-23 08:30:37Z

2

The array looks like : [field1: Array(0), field0: Array(0)]

Why?

const array = [];
array['field1'] = [];
array['field0'] = [];
console.log(array) // => [field1: Array(0), field0: Array(0)]

This i not a array, correct array like:

const array = [];
array.put([]);
array.put([]);
console.log(array) // => [Array(0), Array(0)]

Update your finalFieldsArray to make map work:

const finalFieldsArray = [];
_.forEach(configVal, function(selField,key){
    _.forEach(configDefaultVal, function(defField, keys) {
        if(key == keys) {
            finalFieldsArray.push({
                key: key,
                value: {
                    selectedValues: selField,
                    defaultValues: defField
                }
            });
         }
     })
 })

edited Oct 23, 2018 at 8:30

answered Oct 23, 2018 at 8:18

Kenzk447

5252 silver badges7 bronze badges

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

4 Comments

SHIKHAR SINGH Over a year ago

I have edited my question to give an idea as to how I am making this array/object.

Kenzk447 Over a year ago

i was updated my aswer, but you should thing about object instead of an array

SHIKHAR SINGH Over a year ago

This approach works perfectly fine, thanks,btw can you tell me what was the issue with the previous approach?

Kenzk447 Over a year ago

JS array using only numeric to index value, so array[2] work but array['key'] not.

Collectives™ on Stack Overflow

Component does not get called in mapping ReactJS

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related