We Keep Coding

Reactjs: How to add startAdornment and endAdornment into the Textfield

In my project, using Textfield to add tags. But my requirement is to add an endAdornment to pass the values to be added or edited. But I don't know how to use it, please help me to do this, give me some suggestions to fix this problem.
render() {
return (
<>
<TextField id="outlined-basic" variant="outlined"
InputProps={{
startAdornment: this.state.items.map(item => (
<Chip
key={item}
tabIndex={-1}
label={item}
onDelete={() => this.handleDelete(item)}
onClick={() => this.handleItemEdit(item)}
/>
)),
// endAdornment:
}}
ref={this.state.items}
className={"input " + (this.state.error && " has-error")}
value={this.state.value}
placeholder="Type or paste email addresses and press `Enter`..."
onKeyDown={this.handleKeyDown}
onChange={this.handleChange}
onPaste={this.handlePaste}
/>
{this.state.error && <p className="error">{this.state.error}</p>}
</>
);
}
}

How to Add input fields in form when "Other" option is selected in dropdown in React.js

I have a multi select dropdown input and I am saving all the selected items in an (useState) array when user click add icon.
I want to render input field when "Other" option is selected in dropdown.
and also want that the value entered in other should be added in the array.
handle change :-
const handleCareerChoice = (event) => {
setValues({ ...values, careerChoice: event.target.value });
};
const handleChange = (input) => (event) => {
setValues({ ...values, error: false, [input]:event.target.value});
};
const [otherState, setOtherState] = useState(false);
dropdown
<Grid container className={classes.grid} style={{ marginBottom: "10px" }}>
<Grid item xs={11} sm={5} lg={11} sx={{ m: 1 }}>
<FormControl variant="outlined" fullWidth sx={{ mt: 1 }}>
<InputLabel id="demo-mutiple-checkbox-label">
Top Career Choice
</InputLabel>
<Select
label="Top Career Choice"
id="demo-mutiple-checkbox"
multiple
value={values.careerChoice}
onChange={handleChange("careerChoice")}
renderValue={(selected) => selected.join(", ")}
>
<TextField variant="outlined" style={{ width: "100%" }} />
{careerChoice.map((name) => (
<MenuItem key={name} value={name}>
<Checkbox checked={values.careerChoice.indexOf(name) > -1} />
<ListItemText primary={name} />
</MenuItem>
))}
<MenuItem >
<Checkbox onClick={setOtherCareerChoice(!otherCareerChoice)} />
<ListItemText primary={"Others"} />
</MenuItem>
</Select>
</FormControl>
</Grid>
{ otherCareerChoice && (
<Grid item xs={11} sm={5} lg={11} sx={{ m: 1 }}>
<FormControl variant="outlined" fullWidth sx={{ mt: 1 }}>
<InputLabel htmlFor="outlined-adornment-password">
Other Career Choice
</InputLabel>
<OutlinedInput
id="careerChoice"
name="careerChoice"
label="Additional Career Choice"
fullWidth
autoComplete="careerChoice"
// value={values.careerChoice}
onChange={handleCareerChoice}
endAdornment={
<InputAdornment position="end">
<IconButton
edge="end"
>
<Add/>
</IconButton>
</InputAdornment>
}
/>
</FormControl>
</Grid>
)}
currently, input is looking like
this but on clicking other text field, I see a blank screen with error
TypeError: selected.join is not a function
Please suggest me a good approach to do this

Here's a codesandbox for the full code
First you want to render the "Other Career Text" input box when it is selected from the dropdown. For that, add an onClick for Others in the dropdown
<MenuItem onClick={() => setOtherCareerChoice(!otherCareerChoice)}>
<Checkbox />
<ListItemText primary={"Others"} />
</MenuItem>
Now that the input field is rendered, at a value and onChange attribute to let the user type a text
<OutlinedInput
value={otherCareerText}
onChange={(event) => setOtherCareerText(event.target.value)}
Finally when the user clicks the "+" button, push this text to your state in an onClick
<IconButton
onClick={() => {
setValues({
...values,
careerChoice: [...values.careerChoice, otherCareerText]
});
setOtherCareerChoice(false);
setOtherCareerText("");
}}
>

Disable input field when click edit button using React Hooks

I don't understand what I'm doing wrong in here.
The scenario is that I am on the user profile details and I want to edit the information but one input must be disable at all the time.
When I'm loading the page the input it is actually disabled but as soon as I click the edit button it is becoming editable like the rest of the other input.
Any suggestion on how to make it works, please?
const [disabled, setDisabled] = useState(false);
const handleClickEditMember = () => {
Actions.enableMemberEdit();
setDisabled(!disabled);
};
<Card className={clsx(classes.root, className)}>
<CardHeader
action={
<Button
color="primary"
id="edit-member-button"
onClick={() => handleClickEditMember()}
size="small"
variant="contained"
>
{t('members.edit')}
</Button>
}
title={member.companyName}
/>
<Divider />
<CardContent className={classes.content}>
<CardHeader title={t('members.company_profile')} />
<Grid container spacing={3}>
<Grid item xs={6}>
<TextField
className={classes.textField}
fullWidth
id="companyName"
InputProps={{
readOnly: true,
}}
label={t('members.company_name')}
margin="dense"
name="companyName"
placeholder={t('members.company_name')}
value={member.companyName}
variant="outlined"
/>
</Grid>
<Grid item xs={3}>
<TextField
className={classes.textField}
fullWidth
id="Id"
InputProps={{
readOnly: true,
}}
disabled={!disabled}
label={t('members.id')}
margin="dense"
name="Id"
placeholder={t('members.id')}
value={member.id}
variant="outlined"
/>
</Grid>
</Grid>

You're updating the state everytime in the handleClickEditMember() by doing setDisabled(!disabled); which will eventually set to true as its false initially.
So you'll have to
Remove that piece of code and the state update won't be triggered again!
And For the ID input field just use disabled={disabled}

<TextField
className={classes.textField}
fullWidth
id="Id"
InputProps={{
readOnly: true,
}}
**disabled**
label={t('members.id')}
margin="dense"
name="Id"
placeholder={t('members.id')}
value={member.id}
variant="outlined"
/>
Just disable the textfield. Don't assign any value to disabled property

Just resolved by doing this:
InputProps={{
readOnly: memberId ? true : false,
}}

How can Auto Select React Material TextField's Value?

This a react state:
const [filterByInvoiceNo, setFilterByInvoiceNo] = useState( 0 );
This is React Material TextField:
<TextField
size="small"
type="number"
label="Invoice No"
variant="outlined"
value={filterByInvoiceNo}
onChange={e => {
setFilterByInvoiceNo( e.target.value );
}}
/>
I need to auto select totally field value when I click TextField Box.
Please see the image

Below should work
<TextField
size="small"
type="number"
label="Invoice No"
variant="outlined"
value={filterByInvoiceNo}
onChange={e => {
setFilterByInvoiceNo( e.target.value );
}}
onFocus={e => {e.target.select();}}
/>

Why my handleChange is not being invoked? MaterialUI

Is there something wrong with the TextField component from Material UI that I'm missing?
My handleChange simply is not getting invoked.
I can type in value in the inputs, but state of the component is not changing.
Here is the Auth component:
const Auth = () => {
const [formData, setFormData] = useState(initialFormState)
const handleSubmit = (e) => {
e.preventDefault();
console.log(formData);
}
const handleChange = (e) => {
setFormData({
...formData,
[e.target.name]: e.target.value
})
}
return (
<Container component="main" maxWidth="xs">
<Paper className={classes.paper} elevation={3}>
<form className={classes.form} onSubmit={handleSubmit}>
<Grid container spacing={2}>
<Input name="email" label="e-mail" handleChange={handleChange} type="email" />
<Input name="password" label="password" handleChange={handleChange} type={showPassword ? "text" : "password"} handleShowPassword={handleShowPassword} />
</Grid>
<Button type="submit" variant="contained" color="primary" className={classes.submit} fullWidth>
{isSignup ? "Sign up" : "Sign in"}
</Button>
</form>
</Paper>
</Container>
);
}
And the input component which is inside Auth:
const Input = ({ name, half, handleChange, type, label, autoFocus, handleShowPassword }) => {
return (
<>
<Grid item xs={12} sm={half ? 6 : 12}>
<TextField
name={name}
handleChange={handleChange}
variant="outlined"
required
fullWidth
label={label}
autoFocus={autoFocus}
type={type}
InputProps={name === "password" ? {
endAdornment: (
<InputAdornment position="end">
<IconButton onClick={handleShowPassword}>
{type === "password" ? <Visibility/> : <VisibilityOff/>}
</IconButton>
</InputAdornment>
)
} : null}
/>
</Grid>
</>
);
}

You've to change the input attribute from handleChange to onChange
<Input name="email" label="e-mail" onChange={handleChange} type="email" />
<Input name="password" label="password" onChange={handleChange} type={showPassword ? "text" : "password"} handleShowPassword={handleShowPassword} />