Is possible to add onClick event in helperText Material UI TextField? And can I add 2 helperText in 1 TextField?
<TextField
variant="outlined"
placeholder="Write a comment..."
fullWidth
multiline
className={classes.tfCmt}
onChange={this.handleAddComment}
onFocus={this.handleAppearSaveBtn}
helperText={visibleSaveBtn && "Save"}
FormHelperTextProps={{
className: classes.btnAction
}}
/>
Is possible to add onClick event in helpertext Material UI TextField?
Yes. You could include an onClick function on your FormHelperTextProps.
...
<TextField
variant="outlined"
placeholder="Write a comment..."
fullWidth
multiline
helperText="Hello world"
FormHelperTextProps={{
onClick: () => alert("Clicked!")
}}
/>
And can I add 2 helptext in 1 TextField?
If I understand correctly, you want to have 2 elements for helper text. You could create a component and pass that as your helperText prop to TextField component.
...
function HelperTexts() {
const helperTexts = [
{
id: 1,
value: "helper text 1"
},
{
id: 2,
value: "helper text 2"
}
];
return helperTexts.map((text) => (
<span key={text.id} data-id={text.id} className="helper-text">
{text.value}
</span>
));
}
return (
<TextField
variant="outlined"
placeholder="Write a comment..."
fullWidth
multiline
helperText={<HelperTexts />}
/>
);
