0

So I was able to return array from action and reducer in static class / function and now I want to render that data inside a data property of MenuItems (https://docs.sencha.com/extreact/6.5.0/modern/Ext.menu.Item.html). I feel I need to set the properties in tpl inline function, but I don't know how. This is what I have tried so far (read the comments):

function ShortcutComponent({ usershortcuts }) {
    console.log(usershortcuts); // I get an array
    return (
        <Button ui="headerButton" arrow={false} ripple={false} iconCls="icon-directions" border={false} handler={() => this.loadData()}>
                <Menu title="Shortcuts">
                    <MenuItem data={usershortcuts} tpl={function(data){
                        setIconCls(data.shortcutDefinition.iconCls); // I can't use setIconCls
                        setText(data.shortcutDefinition.description); // I can't set text
                    }} />
                </Menu>
            </Button>
    )
}

const mapStateToProps = (state) => {
    return { 
        usershortcuts: state.usershortcuts
    }
};


const mapDispatchToProps = (dispatch) => {
    return {
        actions: bindActionCreators(usershortcutAction, dispatch)
    }
}


export default connect(mapStateToProps, mapDispatchToProps) (ShortcutComponent);
Милош Рајковић
  • 293
  • 2
  • 14

1 Answers1

1

Use map() to render an array of items:

function ShortcutComponent({ usershortcuts }) {
    return (
        <Button ui="headerButton" arrow={false} ripple={false} iconCls="icon-directions" border={false} handler={() => this.loadData()}>
                <Menu title="Shortcuts">
                    {usershortcuts.map(shortcut => (
                        <MenuItem key={shortcut.key} data={shortcut} tpl={data => (
                            <a className={data.iconCls} href={data.href}>{data.description}</a>
                        )}/>
                    ))}
                </Menu>
            </Button>
    )
}

Not that every sibling of the same type needs to have a unique key so that react can distinguish them. Usually you will use primary keys of your entities for it.

The tpl props is a function that has to return the jsx representation of a menu item. In my example this is a link but it can be everything else.

trixn
  • 15,761
  • 2
  • 38
  • 55
  • What to use to setIconCls inside? What is the proper syntax to access methods setIconCls? Do I need to have some method first attached to it? – Милош Рајковић Apr 17 '18 at 11:00
  • Do you mean to do it like this? {setIconCls(data.shortcutDefinition.iconCls)}}/> – Милош Рајковић Apr 17 '18 at 11:04
  • In the template render function `data` refers to the shortcut item. The function needs to return jsx. it should not have any side effects like in your example. It should return the markup how you want your item to be rendered. You can use ever property of the `data`. This pattern is called [render prop](https://reactjs.org/docs/render-props.html). – trixn Apr 17 '18 at 11:05
  • No you should not call a function there. You should create the jsx markup for the item and return that. Inside that you can set the `className` on any item you want. – trixn Apr 17 '18 at 11:06
  • I will give you an example after lunch ;) – trixn Apr 17 '18 at 11:07
  • Also, I think that usershortcuts even though I get an array in consol.log is not read immediately, that is timing is not right? Can you also post an answer how to set a Timeout here? :) Thanks! :) – Милош Рајковић Apr 17 '18 at 11:12
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/169168/discussion-between-trixn-and-miloskomirajkovic94). – trixn Apr 17 '18 at 12:26