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"});
Related
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
I want to use history.push to link to another page on my React app upon a button click but when I use history.push, it gives me the error Unexpected use of 'history'.(no-restricted-globals)
<ExampleComponent handleClick={history.push('/path/to/page')} text={'something'} />
Inside the ExampleComponent, I have a button with an onClick handler that calls the handleClick props
<Button onClick={() => this.props.handleClick}>{this.props.text}</Button>
update
When you use ExampleComponent component there is a problem with the variable history. As this is globally reachable as windows.history. I think you call history.push the linter gives a warning if it is window.history or not.
So, I'm trying to use Semantic UI modal component with the form component.
My problem is that if I use these two together the UI becomes bad.
I created a sandbox about my current situation: https://codesandbox.io/s/2n1pj96ry
As you can see now the submit button does not attached to the form.
If I move the Form component directly inside the Modal component, like this:
<Modal...>
<Form>
...
</Form>
</Modal>
the submit will attached to the form, but the UI breakes down.
I tried to add different classes to these components (like ui modal to the Form component, but it doesnt worked well).
Do you have any suggetsion?
Thanks for you help!
You can use the as prop on the Modal to make it a form element.
<Modal
as={Form}
onSubmit={e => handleSubmit(e)}
open={true}
size="tiny">
Any button with the submit type in your modal will fire the onSubmit handler. I find this to be a nice way to opt-in to required fields and easy validation by the browser on form elements.
Be sure to pass the event to your submit handler and use the preventDefault method to avoid the browser from automatically trying to post your form.
Forked your sandbox and made a working example. The modal is changed to a <form> element, the Input has the required property and the browser will demand the element is valid before firing the onSubmit handler. The default form action is prevented, and you can handle as desired with whatever.
I'm fairly new to React and I'm using the Ant Design framework (https://ant.design/).
I have a table list of items that I'm looking to have a button on each so that when it is pressed additional information about that row becomes available (which is a secondary API call specific to that row).
I'm trying to use a popover but I'm noticing that the popover wants the text before being rendered which is a problem since I don't have that information until the second API call. The best idea I've come up so far is to have the button press trigger the api call and then the state is updated but that creates a funky experience (as it is update after the popover is already opened - after starting with the previous rows information). It isn't a huge amount of time but it still isn't an ideal experience.
This is what I have so far:
<Popover content={this.contentSec([record['section']])} title=
{record['section']} trigger="click">
<Button onClick={() => this.sectionAttributes(record['section'])}>
<Icon type="info-circle-o" />
</Button>
</Popover>
this.sectionAttributes triggers my fetch request. and this.contentSec does the formatting on the existing popup (see below).
contentSec(props) {
const listItems = this.state.attributes.map((item) =>
<li>{item}</li>
);
return <div><ul>{listItems}</ul></div>
}
Any ideas of a better way to handle this so that there isn't that buggy delay when clicking the button for the popover?
Thanks.
As the content is populated after the second api call, You can send two props content which can be empty string or any default value and loading variable as true on click. Once you have the data after the API call you can send the updated props ie content with actual text and loading as false and finally handle your logic and state update in componentwillrecieveprops() in the popover component.
You can use the loading prop to switch from a loader initially to the actual content.
Write a condition to check if the response from this.sectionAttributes(record['section'] is true, if it is true then
<Popover content={this.contentSec([record['section']])} title=
{record['section']} trigger="click">
<Button onClick={() => this.sectionAttributes(record['section'])}>
<Icon type="info-circle-o" />
</Button>
</Popover>
else simply use
<Button onClick={() => this.sectionAttributes(record['section'])}>
<Icon type="info-circle-o" />
</Button>
For the first time user clicks on button, the component rerenders and state gets updated, so when it rerenders you can see popover as the if condition satisfy.
I have two components List and Form. Onthes components, i'm using Dropzone
I disabled click, just Drag and Drop is possible
But, on the form component, I would like to add a button, wich enable to add a dcument in browsing.
In the form component, I call my component dropzone
<UploadZone onupload={this.props.onCreateDocument} onsuccessupload={this.uploadedfile} lastfileupload={this.props.lastuploadfile} />
I've added my button :
<RaisedButton label="Add" primary={true} onClick={this.browseDz}/>
browseDz = () => {
}
I don't know how call Dropzone on the button to add a document
Thank you for yours answers
You wouldn't use Dropzone for this part, you implement it yourself. You could use the trick where you put this button in a <label htmlFor={id}> and have a file input with the same id. You'll have two ways of receiving files, so just store the latest selection from the user in one state key.