Rendering dynamic tabs with React.js and Semantic UI React

Question

Using React.js and Semantic UI React I'd like to dynamically create tabs.

When using a const representing the array of tab objects, this works fine.

const panes = [
            {
                menuItem: 'Record 1',
                render: () => <Tab.Pane>Tab 1 Content</Tab.Pane>
            }
        ]
...
<Tab panes={panes}/>

However, I need these to be dynamically added based on the state variable source:

getPanes() {
        return this
            .state
            .source
            .map((source) => [{
                menuItem: source.sourceName,
                render: () => <Tab.Pane>Tab 1 Content</Tab.Pane>
            }])
    }
...
<Tab panes={this.getPanes}/>

This results in:

Warning: Failed prop type: Invalid prop `panes` of type `function` supplied to `Tab`, expected an array.

Hunter McMillen · Accepted Answer · 2018-05-22 17:18:21Z

1

Two issues:

this.getPanes refers to your function definition, it doesn't invoke your function. You want the result of your function, should you should invoke it using parentheses: this.getPanes()
.map() returns a new array of elements that is the result of applying your supplied function to each original element. What your really want to return within .map is your pane object, not an array of one pane object:

--

.map((source) => ({ 
  menuItem: source.sourceName, 
  render: () => <Tab.Pane>Tab 1 Content</Tab.Pane> 
}))

answered May 22, 2018 at 17:18

Hunter McMillen

61.8k25 gold badges124 silver badges176 bronze badges

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

Collectives™ on Stack Overflow

Rendering dynamic tabs with React.js and Semantic UI React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related