We Keep Coding

Return the default value in the TextField

There are several filters on my site (by date, duration, and so on). Accordingly, from a large amount of data, the user can find what he needs
There is also a "reset all filters" button that resets all filters and returns the full list of products.
However, with one of the filters, I ran into a problem: in this filter, I use a TextField from the mui. And the problem is that the values ​​themselves, by which the desired products are filtered, are discarded, and what the user entered in the field remains unchanged.
I will give an example: The user filters only by this field. Having received any result, he wants to return to the original list and presses the "reset all filters" button. All filters are reset and the original list is returned, but the data entered in the field remains, that is, the field itself is not cleared.
Help solve the problem
const MAX_DURATION = 9999999
export default function FilterDuration() {
const [minDuration, setMinDuration] = useState(0);
const [maxDuration, setMaxDuration] = useState(MAX_DURATION);
useEffect(() => {
updatedFilters.durationRange = { min: minDuration, max: maxDuration }
setFilters(updatedFilters)
if (maxDuration === 0) {
setMaxDuration(MAX_DURATION)
}
}, [minDuration, maxDuration])
return (
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
<div style={{ width: "120px" }}>
<TextField
onInput={(e) => {
const newValue = Number(e.target.value)
if (newValue )
setMinDuration(newValue)
}} />
</div>
</div>
);
}

Add a value prop to your TextField which has the minDuration like this:
<TextField
type='number'
size="small"
margin="dense"
label="From"
value={minDuration}
onInput={(e) => {
e.target.value = Math.max(0, parseInt(e.target.value)).toString().slice(0,7)
const newValue = Number(e.target.value)
if (newValue <= maxDuration && newValue >= 0 && newValue <= MAX_DURATION)
setMinDuration(newValue)
}} />

You want the value of the TextField to be managed by the state of your component. Add a value attribute and set it to the current value of minDuration:
<TextField
...
value={minDuration}
/>

Remove selected element from array

I have input feild which takes a input (interest) from user and after hitting the Enter key adds the interest to the interests array. Then the elements in this array are displayed on screen via the Domain component as the user goes on adding. The Domain component contains an icon X (cross) which on click should delete the selected/clicked element from the array. Right now the last element in the array is getting removed after clicking.
How can I resolve this? Here is the code:
function Demo() {
const [interest, setinterest] = useState("");
const [interests, setinterests] = useState([]);
const domainSelection = (e) => {
if (e.key === "Enter" && interest.length > 0) {
setinterests((interests) => [...interests, interest]);
setinterest("");
}
};
const RemoveDomain = (e) => {
var arr = [...interests];
var index = arr.indexOf(e.target.value);
arr.splice(index, 1);
setinterests(arr);
};
const Domain = ({ interest }) => {
return (
<span>
{interest}
<span>
<X onClick={RemoveDomain} />
</span>
</span>
);
};
return (
<div>
<Input
name="intersts"
type="text"
placeholder="eg Machine Learning .. "
value={interest}
required={true}
onChange={(e) => setinterest(e.target.value)}
className="interest-input inputs"
onKeyDown={domainSelection}
/>
{interests.map((interest, i) => (
<Domain
interest={interest}
// Prevent duplicate keys by appending index:
key={interest + i}
/>
))}
</div>
);
}
export default Demo;

I think e.target.value is undefined.
Use Filter, This might help
const RemoveDomain = (value) => {
var arr = interests.filter((item) => item !== value);
setinterests(arr);
};
const Domain = ({ interest }) => {
return (
<span>
{interest}
<span>
<X onClick={() => RemoveDomain(interest)} />
</span>
</span>
);
};

How can I print multiiple text areas when clicking on a button in reactjs

Within my reactjs class component, I want to create a button that opens a new text area everytime I click on it (e.g., when I click 5 times on it, it should open 5 textareas). In the current result, it only opens a textarea ones.
Thus, In a first step, I created a state with value 0 and create a function that should change the state:
// InitialState
state = {
value: 0,
};
onChange() {
this.setState({
value: this.state.value + 1,
});
}
In the next step, I rendered a button and created if-statements to show the textareas (which does not work):
render() {
return (
<div>
<IconButton onClick={this.onChange.bind(this)}>
<AddCircleOutlineIcon />
</IconButton>
<br />
{this.state.value >= 1 ? this.showTextArea() : null}
</div>
);
}
And this is my showTextArea function:
showTextArea = () => {
return (
<textarea
placeholder={this.state.placeholder}
value={this.state.value}
onChange={this.onChange1.bind(this)}
rows="2"
style={{ fontSize: "18px" }}
onFocus={(e) => (e.target.placeholder = "")}
onBlur={(e) => (e.target.placeholder = this.state.placeholder)}
/>
);
};

You condition is wrong. this.state.value >= 1 It should be like this because after first textbox opens and you click your button value will be 2 and first textbox will hide

This can be achieved using only single condition. Change your render method like this with for loop:
render() {
return (
<div>
<IconButton onClick={this.onChange.bind(this)}>
<AddCircleOutlineIcon />
</IconButton>
<br />
{
for (let i = 0; i < this.state.value; i++) {
{this.showTextArea()}
}
}
</div>
);
}

create a transition on every submit click with a new form

Ok so I have been trying this for a moment and I don't know how to go about it, what I want is simple, generate a brand new form but with a react transtion group effect from the old form to the new form (everytime a user clicks the submit button)
you are a lifesaver if you can provide help or a thought.
this.state.transitionTimes I tried to increment a state key maybe watch that but it doesn't work
<div disabled={currentAccommodation.isLoading || currentRoom.isLoading} className="accommodation_popup_innerContainer_inputContainer_transition_container">
<SwitchTransition>
<CSSTransition
key={this.state.isAddRoom}
addEndListener={(node, done) =>
node.addEventListener('transitionend', done, false)
}
classNames="fade"
>
{(isAddRoom || this.state.isAddRoom) === true ? (
<CreateRoomForm
ScrollBar={ScrollBar}
LabelInput={LabelInput}
currentState={this.state}
handleChange={() => this.handleChange}
removeItem={this.removeItem}
handleMultipleChange={this.handleMultipleChange}
setTheState={this.setTheState}
error={this.state.error}
/>
) : ( // I want the transition on this side
<cssTransition
key={this.state.transitionTimes}
addEndListener={(node, done) =>
node.addEventListener('transitionend', done, false)
}
classNames="fade">
<CreateAccommodationForm
ScrollBar={ScrollBar}
LabelInput={LabelInput}
currentState={this.state}
handleChange={() => this.handleChange}
removeItem={this.removeItem}
handleMultipleChange={this.handleMultipleChange}
setTheState={this.setTheState}
OnChangeDescription={this.OnChangeDescription}
error={this.state.error}
/>
</cssTransition>
)}
</CSSTransition>
</SwitchTransition>
</div>
submit buttons
<Button
type="submit"
className="btn accommodation_popup_innerContainer_buttons_button"
value={isAddRoom ? 'Add' : 'Submit'}
onClick={
(isAddRoom || this.state.isAddRoom)
? this.handleAddRoomBtn // for the top form
: this.handleSubmitBtn // for th bottom form
}
/>
My submit button
handleAddRoomBtn = async (e) => {
e.preventDefault();
await this.setState({
...this.initiaState,
transitionTimes: this.state.transitionTimes + 1
})
console.log(this.state)
};

only allowing numbers upto certain length in material ui

We need user to enter only numbers and it should have a maximum length of say 3.
How can we accomplish this in material ui ?
<TextField
id="score"
label="score"
className={classes.textField}
name="totalScore"
margin="normal"
defaultValue={score}
/>
We want only numeric values here

Try this...
<TextField
id="score"
label="score"
name="totalScore"
style={style.filedStyle}
inputProps={{ min: 3, max: 3}}
/>

Actually this is the way it works, you have input type as number. so, you can apply max attribute but it will validate not limit the input numbers, Checkout this thread.
The workaround is to apply oninput and count the length. like this
onInput={(e)=>{
e.target.value = Math.max(0, parseInt(e.target.value) ).toString().slice(0,3)
So your textinput would look like
<TextField type="number"
className="text-field-amount"
onInput={(e)=>{
e.target.value = Math.max(0, parseInt(e.target.value) ).toString().slice(0,2)
}}
min={0}
/>
Demo

Use controlled input, and update state only if the input is number.
ex:
state will be like this
this.state={
score: 0
}
create a function to handle change in text field.
handleChange(e){
//update state here with value from TextField.
}
and your textfield will look like this.
<TextField
id="score"
label="score"
className={classes.textField}
name="totalScore"
margin="normal"
value={this.state.score}
onChange={this.handleChange.bind(this)}
/>

<TextField
id="score"
label="score"
className={classes.textField}
name="totalScore"
margin="normal"
defaultValue={score}
/>
you can do this with Jquery
$('#score').keypress(function(e){
var code = (e.which) ? e.which : e.keyCode;
if($('#' + e.target.id).val().length > 2)
e.preventDefault();
if (code > 31 && (code < 48 || code > 57)) {
e.preventDefault();
}
});

<TextField
id="number"
placeholder="Enter Number"
type="number"
value={state.count}
onChange={(event) => {
const regex = /^([0-9]){minLength,maxLength}$/;
if (event.target.value === '' || regex.test(event.target.value)) {
setState({ ...state, count: event.target.value });
}
}}
variant="outlined" />

number + length restriction
<TextField
value={phone}
onChange={event => setPhone(event.target.value)}
variant="outlined"
placeholder={'Phone number'}
type={'number'}
onInput={(e)=>{e.target.value = Math.max(0, parseInt(e.target.value)).toString().slice(0,10)}}
min={0}
/>