Fabric UI Using PivotItem in Map Loop

Question

I'm trying to dynamically add PivotItems to a Fabric UI Pivot.

return (
    <div>
         <PrimaryButton style={{margin:5 }} onClick={addItem}>
            Add
        </PrimaryButton>
        <Pivot aria-label="My Items">
         
        {items.map((item)=>{
            
            return (
            <div key={uniqueId}>
                <PivotItem headerText="test">
                    Test
                </PivotItem>     
            </div>)
        })}
        </Pivot>
    </div>
)

but the items are not rendering. When I remove all the Pivot/item-stuff and just print out some text it works fine...

How does the data `items` look like? – Ajeet Shah Mar 27 '21 at 18:27 — Ajeet Shah, Mar 27 '21 at 18:27

score 0 · Answer 1 · answered May 01 '21 at 05:38

ok I finally found the issue here. Inside the map-function I used

<div key...

but this code is inside a <pivot> which allows only <PivotItem> as childs...

so I fixed it like this and it works:

return (
<div>
     <PrimaryButton style={{margin:5 }} onClick={addItem}>
        Add
    </PrimaryButton>
    <Pivot aria-label="My Items">
     
    {items.map((item)=>{
        
        return (           
            <PivotItem headerText="test" key={uniqueId}>
                Test
            </PivotItem>     
       )
    })}
    </Pivot>
</div>

)

Fabric UI Using PivotItem in Map Loop

1 Answers1