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...
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>
)
Related
I want to add a to a react-tippy tooltip.
Is it possible?
I only get it to show [object Object]
Look at title bellow
<Tooltip
// title={this.renderTicks(idx, row)}
title={<div>
<h4>Hello</h4>
<span>This is a span</span>
</div>}
position="right"
trigger="click"
theme="light"
arrow="true"
arrowSize="big"
distance="3"
style={{fontSize:14}}
>
<div>Click Here</div>
</Tooltip>
I didn't use it before but reading the documentation said that you can use html props.
"Tooltip content. If you don't define html, the title will be used"
Something like this:
<Tooltip
html={(
<div>
<h4>Hello</h4>
<span>This is a span</span>
</div>
)}
>
OK seems easy enough
instead of title just use 'html'
<Tooltip
// title={this.renderTicks(idx, row)}
html={<div>
<h4>Hello</h4>
<span>This is a span</span>
</div>}
position="right"
trigger="click"
theme="light"
arrow="true"
arrowSize="big"
distance="3"
style={{fontSize:14}}
>
<div>Click Here</div>
</Tooltip>
I have this components
and i have this code as the if sentence.
I have the same method in other project that works, can anyone help?
it should only render the first one as addnewchat hte others ones should be avatars, if i take of the "!" only renders the avatars.
You can change the syntax of if and else. Instead of using ternary operator directly after return keyword, use a parent tag, and then wrap your whole component inside it. Like
return (
<>
{addNewChat ? (
<div>if logic here</div>
) : (
<div>else logic here</div>
)}
</>
)
calling component:
<div className="sidebar__chats">
<SidebarChat addNewChat />
<SidebarChat />
<SidebarChat />
<SidebarChat />
<SidebarChat />
</div>
code:
return (
<>
{addNewChat ? (
<div className="sidebarChat">
<Avatar
alt="João Espinheira"
src={`https://avatars.dicebear.com/api/pixel-art/${seed}.svg`}
sx={{ width: 38, height: 38 }}
/>
<div className="sidebarChat__info">
<h2>room name</h2>
<p>last message...</p>
</div>
</div>
) : (
<div onClick={createChat} className="sidebarChat">
<h2>add new chat</h2>
</div>
)}
</>
);
}
i think the code should work, no?
function SidebarChat({ id, name, addNewChat }) like this works fine!
previously i had left a part the {} so that was the thing it was missing
I have a list of cards that want to drag and drop. I want the user could drag and drop by pressing on the specific place (div) on the card (not the whole card). I transfer this div to the child component and add {...provided.dragHandleProps} on this div. Everything works ok, but I get mistakes in console, that Unable to find drag handle. How can I fix this problem?
const posts = (
<DragDropContext onDragEnd={this.dragDrop}>
<Droppable droppableId="dragCards">
{(provided) => (
<div ref={provided.innerRef}>
{cards.map((item, index) => {
return (
<Draggable draggableId={item.key} index={index}>
{(provided) => (
<div
ref={provided.innerRef}
{...provided.draggableProps}
>
<Cards
dragChip={
<div {...provided.dragHandleProps}>
{dragChip}
</div>
} />
</div>
)}
</Draggable>
);
})}
{provided.placeholder}
</div>
)}
</Droppable>
</DragDropContext>
);
And this is div, that I transfer to the child component.
const dragChip = (
<div >
drag me
</div>
);
Looks like your <Draggable> needs a key.
Before
<Draggable draggableId={item.key} index={index}>
After
<Draggable key={item.key} draggableId={item.key} index={index}>
https://github.com/atlassian/react-beautiful-dnd/issues/1673#issuecomment-571293508
You can spread the props in the div inside the drag chip component.
And if you want to conditionally drag and drop, then you can use the isDragDisabled prop of Draggable component
I´m rendering an array, every element of the array is showed with component "Post", but the elements are in the same line, I tried with
return (
<div style={{ height: 'calc(100vh - 65px)' }} className="d-flex justify-content-center align-items-center">
{posts.map((post) => {
return <Post key={post._id} post={post} />
})}
</div>
);
The component "Post" is the next:
I´m using Boostrap por the css styles
return (
{usuario.nombre}
Special title treatment
{texto}
Go somewhere
2 days ago
);
My result (All the elements are in horizontal position and I need them in vertical position):
The father component is root.
If I delete the css classes of the component "Post", teh problem remains.
Have you tried this.
return (
<div>
{posts.map((post) => {
return <><Post key={post._id} post={post} /><br /></>
})}
</div>
);
I only changed the class of div where I put the .map ;| adn the problem was solved.
className="container" instead className="d-flex justify-content-center align-items-center">
I've implemented the material-ui react tabs as follows
<Tabs onChange={(value) => props.changeTabListener(value)} value={props.currentTab} style={styles.tabs}>
<Tab label="Tab 1" value={props.candidatesTab}>
<div style={props.currentTab == 0 ? {display:'inline'} : {display:'none'}}>
<WorksheetTableContainer/>
<div style={fabStyle}>
<FloatingActionButton style={iconPadding}>
<ContentClear/>
</FloatingActionButton>
<FloatingActionButton style={iconPadding}>
<ModeEdit/>
</FloatingActionButton>
<FloatingActionButton style={iconPadding}>
<ContentSave />
</FloatingActionButton>
<FloatingActionButton >
<ArrowForward />
</FloatingActionButton>
</div>
</div>
</Tab>
<Tab label="Tab 2" value={props.savedTakesTab}>
<div style={props.currentTab == 1 ? {display:'inline'} : {display:'none'}}>
<WorksheetTableContainer/>
<div style={fabStyle}>
<FloatingActionButton >
<ArrowForward />
</FloatingActionButton>
</div>
</div>
</Tab>
</Tabs>
Which works for material-ui components. However, the WorksheetTableComponent stacks itself on the first tab. Ie:
How can I have the content be on two separate tabs?
Thanks
The error is occurring since Tab isn't programmed to handle children like that. Fortunately, the Tab label property accepts a node, so you could even pass the desired child that way:
<Tab
value={props.savedTakesTab}
label={
<div style={props.currentTab == 1 ? {display:'inline'} : {display:'none'}}>
<WorksheetTableContainer/>
<div style={fabStyle}>
<FloatingActionButton >
<ArrowForward />
</FloatingActionButton>
</div>
</div>
}
/>
If you still wanted the Tab2 label, you can simply set it within the child node. Hope that helps.