How to iterate over dictionary of array values to render components? ReactJS

Question

I'm trying to iterate over a dictionary of arrays of nodes but am having trouble rendering the components. It compiles and builds correctly but none of the rendering is happening.

It should iterate through 'values' with the dictionary and go through every array and render the elements in the array and do that for all the arrays in the dictionary. I'm not sure why I can't seem to get that to work...

var props = {
    'name' : 'form',
    'timer' : 1500,
    'callback' : function(id, validity, value) {console.log(id, validity, value);},
    'values': {
        "1": ["hello", "world"],
        "2": ["", "test"],
        "3": ["i", "am", "me"]
    },

    'hashNode' : new FormatOC.HashNode({
        "__hash__":true,
        "__array__":"duplicate",
        "__type__":"string"
    }),
}

React.render(React.createElement(HashNodeComponent, props), document.getElementById('react-component'));

hash node:

    render: function() {
        var that = this;

        console.log("Dict:", this.state.values);

        var dict = that.state.values;

        return (
            <div id = "form">
                {Object.keys(dict).map(function(key, index) {
                    console.log("Arrays:", dict[key]);

                    dict[key].map(function(v, i) {
                        return (
                            <div>
                            {(that.props.hashNode.get().constructor.name === "Parent") ?                                 
                                    <ParentComponent
                                        name={that.props.name + i}
                                        key={i}
                                        timer={that.props.timer}
                                        callback={that.childChange}
                                        values={v}
                                        newParent={that.props.hashNode.get()}
                                    />
                                    :
                                    <NodeComponent
                                        name={that.props.name + i}
                                        key={i}
                                        timer={that.props.timer}
                                        callback={that.childChange}
                                        value={v}
                                        newNode={that.props.hashNode.get()}
                                    />
                                }
                                <button data-index={i} onClick={that.removeItem}>Remove
                                </button>
                            </div>
                        )
                    })
                })
                <button onClick={() => that.addEmptyItem()}>Add
                </button>
            }
            </div>
        )
    }

Michał Perłakowski · Accepted Answer · 2018-05-16 19:18:27Z

1

You forgot to return in the first map function. It should be:

return dict[key].map(function(v, i) {

answered May 16, 2018 at 19:18

Michał Perłakowski

93.4k30 gold badges165 silver badges189 bronze badges

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

4 Comments

Sam Over a year ago

that worked! Why would I have needed that extra return?

Michał Perłakowski Over a year ago

@Sam The inner return applies only to the inner function. The map function creates an array of values returned by the callback function. When you just call dict[key].map without returning the result, it doesn't do anything.

Sam Over a year ago

That actually solved one problem but I realized the components still aren't rendering! It's the button that rendered but none of the texts are...

Michał Perłakowski Over a year ago

@Sam What are the ParentComponent and the NodeComponent? Does it work if use just <div>{v}</div> instead?

Collectives™ on Stack Overflow

How to iterate over dictionary of array values to render components? 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