I have an antd collapse component which is wrapped by react-query and I'm enabling refetchInterval in my query, so the issue is that antd Collapse component is restored to its initial state(closed) automatically after opening when the time which I gave to RefetchInterval is set, so is there a way to prevent this behavior?
You can pass the key of the Collapse.Panel in the defaultActiveKey of the Collapse component.
<Collapse defaultActiveKey={['1']}>
<Collapse.Panel header="panel1" key="1">
//some components
</Collapse.Panel>
</Collapse>
OR
You can use a state and pass it on the activeKey props of the Collapse.
For more information: https://ant.design/components/collapse/#API
Related
My DropzoneUploader component from the react-dropzone-uploader npm package has a custom preview component that is optional for display purposes. When I navigate to another route in my app using react-router-dom, the component unmounts. When i navigate to the route with the component, the optional preview component no longer has the data. It's as if there is an on/off switch for the preview component; it turns on when an action is performed, and turned off when the component unmounts (obviously).
The Preview Component is only rendered when the submit button is pressed, or autoUpload is set to true when you drag and drop a file in the zone. The docs do not give a clear way to retain the custom preview component.
<Dropzone
inputContent={<DragAndDropText key={uuid()}/>}
getUploadParams={getUploadParams}
classNames={classNames}
maxFiles={1}
accept=".dwg,.dxf"
PreviewComponent={PreviewComponent}
autoUpload={true}
maxSizeBytes={21000000}
onChangeStatus={handleChangeStatus}
initialFiles={file}
/>
It turns out that the initialFiles arg simply needed to be an array, not the actual file:
<Dropzone
inputContent={<DragAndDropText key={uuid()}/>}
getUploadParams={getUploadParams}
classNames={classNames}
maxFiles={1}
accept=".dwg,.dxf"
PreviewComponent={PreviewComponent}
autoUpload={true}
maxSizeBytes={21000000}
onChangeStatus={handleChangeStatus}
initialFiles={file} // this is wrong
/>
initialFiles={[file]} is the correct format. using redux to store input files I can conditionally render by using initialFiles={file ? [file] : null}
I am using the Material-UI React components.
I have a Button that has a Link to a specific page.
When I update my state ( username in the example below ), should I expect the link to change too or do I need to force an update to the href of the button when I update my state.username ?
<Button component={Link} to={`meeting/${this.state.username}`} variant="raised" color="primary">
Render method of React Components is being called on every state change as long as you update the state properly.
So, answering your question: you should expect the link to change too.
You have to update the state and the link will be updated automatically as the component renders itself on setState
Use this way to update your state rather than updating it directly.
this.setState({username:"newUserName"});
I am using this: https://react-materialize.github.io/#/collapsible.
Is there a way to programmatically make a react-materialize accordion open other than clicking on it itself?
I am trying to add an onClick handler to so that I can do a setState when one of my react-materialize collapsible accordions is selected so that I can do something based on what that state is and render content into that accordions popout (conditional rendering and for another purpose purpose.
I have 3 CollapsibleItems and this.changeBoardType is called 6 times when the page renders, if I do a setState inside it I get caught in an infinite loop:
Maximum update depth exceeded. This can happen when a component
repeatedly calls setState inside componentWillUpdate or
componentDidUpdate. React limits the number of nested updates to
prevent infinite loops.
NOTE: the same thing happens if I use their built in onSelect prop on the <CollapsibleItem onSelect={this.changeBoardType("single")} />
<Collapsible accordion>
<CollapsibleItem onClick={this.changeBoardType("single")} header='Single Hand' icon='filter_1'>
<Row>
<Input s={12}
name="singleHand"
type="select"
label="Position"
value={this.state.singleHand}
onChange={this.handleChange}>
...
If you are trying to pass an argument to an event handler such as onClick or onSelect, you need to do it like this:
<CollapsibleItem onClick={() => this.changeBoardType('single')} ...>
Calling an anonymous function that returns your changeBoardType function will prevent the infinite setState loop
How do I stop the OverlayTrigger component from react-bootstrap from unmounting its overlay component when the onHide prop is called? This is the component that shows the Popover. It is not an issue with Popover since setting overlay={<ComplexComponent />} causes the same issue where ComplexComponent is mounted every time the OverlayTrigger is triggered.
This is a simplified version of what I'm attempting:
const overlay = (<Popover id="some-random-id">
<ComplexComponent />
</Popover>;
<OverlayTrigger
trigger={['hover', 'focus']}
placement="top"
overlay={overlay}
>
<span>trigger label</span>
</OverlayTrigger>
The reason I need to just hide the overlay instead of unmounting it is that ComplexComponent makes service calls on componentWillMount and takes a considerable amount of time to do that initial fetch. I've considered using refs but haven't come up with a good enough strategy.
React noobie... I'm trying to figure out the "correct" way to handle modals in a React App... i.e. where the modal container should live and where the children should live and whether I should use state or props to handle the open/close. Also, how to open them relative to the document body no matter where they live.
My overall App structure:
<App>
<Sidebar />
<MainConstainer>
<ChildPage>
<ChildList>
<BtnModalTrigger>
<button onClick={open.modal.relative.to.doc.body}>Open Modal</button>
</BtnModalTrigger>
</ChildList>
<Modal />
</ChildPage>
</MainConstainer>
</App>
I have the Modal component in the child page hidden, and the trigger button in the list and then the "Close modal" button is in modal itself. I'm not sure where to put my isOpen and isClosed functions or how to pass the onClicks up and down the component tree.