I need to have a condition within style property of the button.
Here is how my code look like at this moment.
<Button variant="outlined" component="span" className={classes.button}>
Choose file
</Button>
I need to have condition something like this.
<Button variant="outlined" component="span" className={classes.button}
style={{display: ((this.props.filename === true)? 'none' : 'block') }}
>
Choose file
</Button>
Any idea how can I make this work?
Ref: https://material-ui.com/api/button/
You were very close. The only trick here is that by specifying === true in your condition will omit the type coercion on your variable, which is actually needed in this case as we want to check if the string is empty.
One fix for this would be to just remove it, and let JavaScript perform the type coercion, which checks if the string is empty or null:
<Button variant="outlined" component="span" className={classes.button}
style={{display: ((this.props.filename) ? 'none' : 'block') }}>
Choose file
</Button>
This post explains well how the conversion is done. More ways of checking for empty string in JavaScript, with coercion or not, can be found in this SO post.
I think the problem here is the same as described here:
Can withStyles pass props to styles object?
Another approach is to create a separate classes: displayNone- when condition is met, and displayBlock-when not. Then use the clsx library to combine the two classes, like so:
import clsx from "clsx"
<Button variant="outlined" component="span"
className={clsx(classes.button,this.props.filename? classes.displayNone:classes.displayBlock)}>
Choose file</Button>
Related
Is it possible to have a nested form inside a larger form using React-Hook-Form?
I have a larger form component that I want a button to cause a MUI Dialog component to display with a mini-form inside it that will have its own validators. When data is successfully added on the dialog form it should add that data to the table.
Table details aren't important here, what I need to know is if the nested/internal form is possible. I've seen posts about two forms in a component like <form/><form/> but none about yup validation in nested forms like <form><form></form></form>.
Roughly it would look like below.
<Box component="form" onSubmit={handleSubmit(handleOnSubmit)}>
//Parent form fields here
<Table/>
//button and dialog are in a separate .jsx component
//but left here for demonstration purposes
<button onClick={openDialog}>Add</button>
<Dialog
fullScreen={fullScreen}
open={open}
onClose={handleClose}
aria-labelledby="responsive-dialog-title"
>
<Box component="form"
onSubmit={handleSubmit2(handleOnSubmit2)}>
<DialogTitle id="responsive-dialog-title">
Fill out fields
</DialogTitle>
<DialogContent>
<FormControl fullWidth size="small">
<Controller
control={control2}
name="identifier"
render={({ field, formState }) => (
<>
<TextField
{...field}
size="small"
autoFocus
id="identifier"
label="Identifier"
fullWidth
/>
<FormHelperText error>{" "}</FormHelperText>
</>
)}
/>
</FormControl>
//other fields
</DialogContent>
<DialogActions>
<Button autoFocus onClick={handleClose}>
Disagree
</Button>
<Button variant="contained" type="submit" autoFocus>
Save
</Button>
</DialogActions>
</Box>
</Dialog>
</Box>
I've tried using separate useForm on each but it looks like validation is still connected with each other. So the parent form gets validated and blocks submit of the child form if it fails.
Would it be better to not use React-Hook-Form for the internal form? I thought about the useFieldArray but it doesn't seem like the appropriate use in this case as I want separate validation and not be able to change the fields after submitting the inner form.
Is this even possible and if so, is it not-recommended?
I have this Button in my React application:
<Button
onClick={this.showReissue}
primary={true}
fullWidth={false}
disabled={this.state.disableButton}
>
this.state.disableButton is a boolean value.
Is there any way I can add a tooltip that is only active if the button is disabled?
I guess it would be something like this
<Tooltip title={disableButton == true ? "" : "test"}>
<Button
variant="outlined"
onClick={showReissue}
primary={true}
fullWidth={false}
disabled={disableButton}
>
Test
</Button>
</Tooltip>
here is a link to try it (I used MUI but the logic is the same)
https://codesandbox.io/s/exciting-germain-dumokw?file=/src/App.js:373-651
I get inspired from this answer
just add the same conditional to the tittle attribute like so
<Button
onClick={this.showReissue}
primary={true}
fullWidth={false}
disabled={this.state.disableButton}
title={this.state.disableButton ? "your tooltip":""}>
I use Date picker
inside of picker is an option to set it clearable, but this option is only when the picker is open
maybe is possible to add custom button like this:
Or maybe instead of doing something custom, to use another picker with option of clear inside of input?
You can add InputProps with endAdornment key to your DatePicker component in order to customize the input element and add a custom icon like this:
InputProps={{
endAdornment: (
<div
onClick={handleClear}
style={{ marginRight: 20, cursor: "pointer" }}
>
<ClearIcon />
</div>
)
}}
You can take a look at this sandbox for a live working example.
I am using Material-UI in one of my ReactJS projects.
I have a few buttons: some - primary, the rest are secondary. What I want to achieve is to disable the tabIndex property on secondary buttons, leaving only the primary buttons accessible with the keyboard tab.
Turns out setting tabIndex attribute to the Button component does not work, nor setting the tabIndex via inputProps:
<Button
variant="contained"
tabIndex="-1" //does not work
size="small"
startIcon={SearchIcon}
color='secondary'
inputProps={{ tabIndex: "-1" }} //does not work either
> some text
</Button>
How do I achieve disabling the accessibility of the secondary buttons via keyboard tab?
I can't set tabindex attribute to an element via CSS, can I?
Any help would be appreciated.
Thank you.
for textfield and input you must code like this
<TextField label="1" inputProps={{ tabIndex: "1" }} />
for button your code must be like this
<Button tabIndex="2">Button 2</Button>
I just went through this on the MUIv5 update. For me, using braces worked:
<Button tabIndex={2}>Button 2</Button>
I am trying to convert an older Material UI implementation. The Docs are bit laggy.
I get this error. The docs say
Name Type Default Description
children * node The content of the
button.
What does this mean and what do I have to put in my code?
<Button
variant="raised"
color="primary"
className={classes.Button}
label={this.state.buttonLabel}
onClick={this.handleClick}
>
</Button>
"children" are what is between the tags:
<Button>we are the children</Button>
Because you don't pass anything - it's undefined. To fix error just add something that React can render, like string:
<Button
variant="raised"
color="primary"
className={classes.Button}
label={this.state.buttonLabel}
onClick={this.handleClick}
>
My Button
</Button>;
Looks like they removed the label property and moved it to the children prop.
So you have to put it between the tags e.g.
<Button> here comes the label </Button>
You can always check the demos for the Components. See here