I'm using collapse using Ant-Design put inside the Collapse tag if I put Map for panel, It's not working can someone suggest me the solution. Without Map It work. But using Map it's not.
Here is the Code:
<Collapse
defaultActiveKey={["1"]}
accordion
expandIcon={(props) => customExpandIcon(props)}
ghost
>
{JSON.map((assesment, index) => (
<div>
<Panel index header="This is panel header 1" key="1">
<p>Header1</p>
</Panel>
</div>
))}
</Collapse>
There seems to be a few problems I would like to point out that should be corrected.
It is not JSON.map but some list of objects (maybe assesments.map).
I think Panel has to be a direct decendent of Collapse so it should not be in a div tag.
Key property should be index so that not all panels have key 1
Here you have a example using map
https://codesandbox.io/s/mystifying-microservice-tuef7?file=/index.js
Please ask any questions if this did not answer your question.
Related
I am facing a problem that in React Next.js, I am unable get the scroll bar vertically. This is my code:
<div className=" hover:bg-violet-400 box-content overflow-y-scroll w-4000">
<div ref={scrollRef}>
{message.map((m) => (
<Message
message={m}
own={m.sender === sender[0]._id}
/>
))}
</div>
</div>
I am using Tailwind Css in this project. The 'overflow-y-scroll' doesnt work. The overflow still happens even this property is empty.
You need to define the height of your div to make your content scrollable inside it. And I just noticed you used w-4000 which is not a tailwind class. So change this as well.
You should remove w-4000 and add w-screen then If your content takes more space than the width, the vertical scrollbar will be available
I am using Fullpage React. I want to click on a sidebar of circle images with numbers corresponding to the section I want to go to. How do I activate the onclick? I have data anchors on the sections (ie section1, section2, etc) and on the images I have data menu anchors (ie, section1, section2, etc). I am doing all this in a class in my App.js. I can't seem to figure out how to use an onclick to tie the image being clicked to take it to that section with Fullpage. I am able to scroll up and down to each section which is working fine. I want to give the user the option to scroll and/or click to each section.
I used refs first and then added Fullpage for the scroll to section effect. But my onclick with the refs stopped working. How can I get the onclick to each section working and keep the scroll effect to each section too?
<img className='circle-1' src='assets/images/circle1.png' onClick={() => this.clickToSection(this.section1ref.current)} data-menuanchor='section1'/>
<img className='circle-2' src='assets/images/circle1.png' onClick={() => this.clickToSection(this.section2ref.current)} data-menuanchor='section2'/>
<img className='circle-3' src='assets/images/circle2.png' onClick={() => this.clickToSection(this.section3ref.current)} data-menuanchor='section3'/>
<div className='section' ref={this.section1ref} data-anchor='section1'>
SECTION 1
</div>
<div className='section' ref={this.section2ref} data-anchor='section2'>
SECTION 2
</div>
<div className='section' ref={this.section3ref} data-anchor='section3'>
SECTION 3 />
</div>
You can take a look at the example in the official documentation for react-fullpage.
Basically:
<button onClick={() => fullpageApi.moveSectionDown()}>
Click me to move down
</button>
You can see it in action here:
https://codesandbox.io/s/m34yq5q0qx
I would like to create a top navigation with a variable amount of items. All items that don't fit into the bar should not be rendered. There will be a little "..." icon that shows a sub-menu when you hover over it, that display the remaining nav items. Any ideas on how to achieve this? I can't seem to render the nav items conditional to the parents width.
I tried setting a ref on my navigation bar and check the scroll width against the client width but it didn't work. Even if I got it to work, I would still render one item more than I should because I don't know the width of the children beforehand.
<div ref={ref} className="nav-list">
{ref ? items.map(i => {
return ref.scrollWidth <= ref.clientWidth ? (
<div className="nav-item" key={i.id}>
{i.title}
</div>
) : false;
}) : false}
<div className="nav-remaining">
<div>
//render remaining items
</div>
</div>
</div>
I saw someone implementing this by adding the children recursively and then backtrack to remove all children that are overflowing. But I have now idea on how to implement this approach in react.
I am using react and semantic. I am using the multiple sidebar example. The idea is that the left hand sidebar offers up some menu options, and then the right hand sidebar is the sub menu based on which option from the left menu is chosen. When a sub menu item is selected, a component is added to the Sidebar.Pusher, i.e displayed on the page.
It all works except re-rendering the content of the Sidebar.Pusher. This apparently only updates when the left hand side bar's visibility changes. I am using redux/rematch to handle state, and can see that the state that holds the content of the Sidebar.Pusher is being updated, but `render() is only being called when visibility changes of the sidebar.
The content of Sidebar.Pusher is an array, and I even tried displaying on the page the length of the array, which is being updated (pushed into) each time an item on the right hand sidebar is clicked. However this doesn't cause a render() to be fired, its literally when the left hand sidebar visibility changes.
Just to note, I did see this issue, however its from last year, and the answer wasn't enough for me to be able to fix the issue. Help would be appreciated.
Structure:
Index.js renders App.js, App.js renders Menu.js (which is a semantic set of tabs). One of the menu options is Sidebar.js which renders:
<Sidebar.Pushable as={Segment}>
<Sidebar
as={Menu}
animation="overlay"
direction="right"
inverted
vertical
visible={secondaryVisibility}
width="wide"
>
{focusedList.map((el, i) => {
return (
<Menu.Item key={i} as="a" onClick={() => this.addSegment(el)}>
<Article el={el} />
</Menu.Item>
)
})}
</Sidebar>
<Sidebar
as={Menu}
animation="overlay"
icon="labeled"
inverted
// onHide={this.handleSidebarHide}
vertical
visible={primaryVisibility}
width="wide"
>
<Menu.Item
onClick={() => this.changeTab(menuItem)}
as="a"
name="menuItem"
header
>
Menu Item
</Menu.Item>
</Sidebar>
<Sidebar.Pusher style={{ minHeight: "600px" }}>
<Segment basic>
{segments.map((el, i) => {
console.log(`el ${el}`)
return <Content key={i} segment={el} />
})}
</Segment>
</Sidebar.Pusher>
and all state (secondaryVisibility etc) is stored in rematch
Thanks
I haven't been able to identify the problem based on the code you've posted, could you provide more info such as the entire Sidebar.js and maybe what's in the Content component?. My guess would be that there's a HOC or lifecycle method getting in the way.
I've created a trivial example that seems to work fine, if I understand what you're trying to accomplish: https://codesandbox.io/s/myl6xpz9py
I got it. I forgot about immutability in state. Perhaps someone will benefit from this.
I was trying to update a state array with
let tmp = prevState.contract.segments
tmp.push(segment)
this.update({ segments: tmp })
However, this won't work as tmp is a reference to prevState.contract.segments, so this won't work, as pushing to tmp is equivelent to pushing to prevState.contract.segments.
you have to have a completely new array:
const tmp = [...prevState.contract.segments, segment]
this.update({ segments: tmp })
Now it works.
I am trying to make a dropdown where each menuitem will have submenuitems
as
Drodown(select)
1. List item(header)
Litem-1(subheader)
Litem-2(subheader)
2. Header-2(header)
Litem-2-1(subheader)
Litem-2-2(subheader)
I am using react bootstrap dropdown to achieve this
where each menuitem would have a panelgroup of items as Litem-1 and Litem-2
So When i click on select the dropdown should open up, but when i click on individual headers(which are not expanded by default), should expand and should not close the dropdown and when clicked on subheaders dropdown has to be closed
I have tried using open option of dropdown ,using this i am trying to control the visibility of the dropdown i could achieve the same for headers when i try to do the same i could not achieve because the event is bubbling up till the parent and dropdown remains open , i also tried to use stopPropagation but looks like menuitem is not respecting it not sure why it is the case
I tried to solve this as this
https://codepen.io/anon/pen/WONMGd
can some one please comment if this approach is right and also why cannot I use event.stopPropagation and prevent default here
Thanks
To use panels in the way you sort of want them to you have to set the accordion prop on your panel to be true. Check out the code below:
<Dropdown.Menu className="Groups" bsRole="menu">
<MenuItem onClick={this.menuItemClickedThatShouldntCloseDropdown.bind(this)}>
<PanelGroup activeKey="1" accordion activeKey={this.state.activeKey}>
<Panel header="header1" eventKey='1'>
<span onClick={this.menuItemShouldCloseDropDown.bind(this)}>Content-1</span>
</Panel>
<Panel header="header2" eventKey='2'>
<span onClick={this.menuItemShouldCloseDropDown.bind(this)}>content=2</span>
</Panel>
</PanelGroup>
</MenuItem>
<MenuItem onClick={this.menuItemClickedThatShouldntCloseDropdown}>
hi
</MenuItem>
</Dropdown.Menu>
</Dropdown>
and add this to your class definition:
handleSelect(activeKey) {
this.setState({ activeKey })
}
This seems to solve at least one of your problems. Id recommend tearing out the other pseudo-state this._forceOpen logic to see what you really need.