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}
Related
I have a modal that is opened from an AppBar directly which let you insert data in the database.
On the current tab opened in background of modal, you can see a table with the current data, but the modal and the table aren't related. The page with the table is a route /Dashboard while the modal is just the modal, can be opened on front of any route.
I want that after you press the "Add" button in the modal to call the function that makes the get request on the /Dashboard route (which have the same named component).
I know about React Context but I that's all, I don't know exactly how to use it in this case after watching some tutorials.
This is my /Dashboard route:
const DashboardButton = (classes) => (
<Route render={({ history }) => (
<Button
className={classes.button}
onClick={() => { history.push('/Dashboard') }}
>
Dashboard
</Button>
)} />
)
which is in the same AppBar component as the modal.
Thank you for your time.
You might want to add an App level context provider and have a variable there, possibly a boolean or a status that the data should update on Dashboard when you add data from AppBar modal. I made a quick demo, check it out.
https://codesandbox.io/s/blue-dew-8rfho?file=/src/App.js
I'm making an app where I have an Overlay component and a Map component rendering behind it just like this:
<div>
{showOverlay && <Overlay />}
<Map /> // this component should mount once
</div>
The overlay is shown to let the map load underneath but when I remove the Overlay (set showOverlay to false here) the Map component re-load.
At first I thought the Map component was just re-rendering, but after some digging I discovered that the component was actually re-mounting.
If I log in the componentWillMount, componentWillUnmount and render methods, the log appear in that order (which seems contradictory)
render
willUnmount
willMount
The parent does not re-mount, only the Map component do.
The Map component just render a div that reference a mapbox-gl-js map (like this https://gist.github.com/tristen/5c4b346ae38892f732504e6785d87057#file-map-js)
What can cause my component to re-mount itself like that ?
Thanks !
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"});
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.