I have an grid composed of lines. Each line has :
a number input filled by the user (amountWithoutTaxe)
a number label that should be automatically calculated after the previous one has been filled (amountWithTaxe) and that equals to thrice the previous one.
What I expect :
The user increases or decreases the first field and automatically the second one is updated.
Example : I put 2, then 6 is automatically displayed.
What I get :
The user increases or decreases the first field, the second one is only updated after he clicks on "add a line".
Example : I put 2, nothing is updated, I click on "add a line", then the field is updated.
This is the playground https://codesandbox.io/s/react-tsx-playground-forked-bss6sh?file=/src/index.tsx
I dont understand why its not working as expected, as the state is refreshed after the first input changes
It seems you are trying to do some changes on the state itself without the setLines function. If you change the attributes of lines that way, React does not know it needs to render, it needs to get a new array. The fix for this can be that in your onChange function you make a new variable called let newLines = [...lines] for example and do changes on it, then set newLines.
For your input element please consider the following change
<input
type="number"
value={line.amountWithoutTaxe}
onChange={(event) => {
let newLines = [...lines];
newLines[index].amountWithoutTaxe = event.target.valueAsNumber;
newLines[index].amountWithTaxe =
newLines[index].amountWithoutTaxe * 3;
setLines(newLines);
}}
></input>
Related
I have a reactive form and I am using Material Angular, with a tab group and the tab names comes from an array, I need to add the possibility of changing those tabs names for new ones. If a write a new title in the input I need to update the name of the tab label.
I’m getting the value from the input, but I can’t figure it out how to send it to the names of the tabs:
app.component.ts
this.newTitleArm = selection.formdata.titleTextArms;
console.log(this.newTitleArm);
STACKBLITZ
SCREENSHOT
Can you have a look at this Stackblits
Note that I have modified the submit method and have added
if(this.form.get('titleArms').value === 'changeArm'){
this.tabs[this.selected.value].name = this.form.get('titleTextArms').value;
}
Here I'm assigning the titleTextArms control value to selected tab name. You can get selected tab by this.tabs[this.selected.value]
Also added the if condition to check selection of radio button.
UPDATE:
since you have used tab names to create the text in the parent component.
In the submit method
need to do the tab name update before emitting the updateDataEvent.
submit(): void {
if (this.form.get('titleArms').value === 'changeArm') {
if (this.form.get('titleTextArms').value !== '') {
this.tabs[this.selected.value].name =
this.form.get('titleTextArms').value;
}
}
this.updateDataEvent.emit({
formdata: this.form.getRawValue(),
tabs: this.tabs,
});
}
The problem is that you are not updating the respective tab name anywhere, neither in your submit, nor in your updateData.
You submit the value, but you are not updating the tabs.
For example, in your submit method add this hard-coded update and then press the Save button:
this.tabs[0].name = "test";
Because now you updated the first tab's name, you should see the change.
I have a state which fills by name of empty form inputs. first time when you click on button it fills by some key but it is empty at all but in second time it fills by some key like "age" or other thing. Do anyone face with this kind of problem?
Check if this works:
<input value={age} onChange={(e)=>setAge(e.target.value)} />
or
setAge(()=>newValue);
if not, please share some code.
I am using react-animated-css, for simple animation in react. I have a list which I am rendering in a <ul> tag. I am adding animation to the first element of the list.
This list is getting updated every 3 seconds. And new element is added at the first position in the array.
The problem is, on load the animation is happening but not on update.
Here is full code : https://codesandbox.io/embed/ecstatic-cloud-qdpcj
I am not able to create a tag with 'react-animated-css' name as I am not eligible. It would be helpful if someone creates one for this.
You must define a key property for every element in a map. If you do not define one the array index is the default key. So the first element with key 0 will be reused after each render and only the last one will be added. If you define a key, the redrawing will based on the key value, and the first one will be added.
{items.map((d, i) => {
if (i === 0) {
return (
<Animated
key={d}
animationIn="bounce"
animationOut="flash"
animationInDuration={1000}
animationOutDuration={1000}
isVisible={true}
>
<li>{d}</li>
</Animated>
);
Here is the example: https://codesandbox.io/s/pedantic-darkness-vgp3f
From my point of view "react-animated-css" this library is not getting re-rendered once the state gets updated.
I have tried it with simple css animation property "#keyframe" and is working fine and getting re-rendered when state changes.
Code-sandbox link :
https://codesandbox.io/s/suspicious-dijkstra-h1q7u
I have quantity:number variable and quantityArray: number[] array. In my template i have two buttons and one input field. when i click the buttons or when i change input field quantity must increment or decrement. and quantityArray must change its length according to quantity. When i click buttons everything works fine. But when i change the input field quantity changes but length of quantityArray is not changing
here's link
Ensure the value is treated as number
return new Array<number>(Number(qty));
Plunker example
Change input type to "number". It's text for now.
<input type="number" [ngModel]="quantity" (ngModelChange)="qtyChange($event)">
I have an unwanted behavior: The second dropdown remembers the old item? Why?
http://jsfiddle.net/Xku9z/ (fiddle borrowed from another thread)
Scenario:
Step 1. Select an item in the first dropdown
Step 2. Select an item in the second dropdown
Step 3. Select an item in the first dropdown (without selecting anything in the second one)
Step 4. Select the same item in the first dropdown as you did in step 1.
I have no clue how to resolve this, I've been using $scope.$watch on the ng-model="option2" just to get a grip on the problem without success.
Also, by setting option2 = null in the data-ng-change="getOptions2()" wont help:
$scope.getOptions2 = function(){
$scope.option2 = null;
};
Any ideas? Thanks
The behaviour you're experiencing is easier to understand if you watch the $scope.option2 value.
When you change the first dropdown you actually don't modify the $scope.option2 value. It stays the same: it's remembered. To make it work like you want just add one line
$scope.option2 = null;
at end of getOptions2 function. That's it. If you want more explanation of the current behaviour, read on.
Why does the second select go blank when I change the first one if the value is remembered?
<select> elements will show a selected value if and only if the value of ng-model can be found in the array bound to this element with ng-options.
Select first items from both dropdowns. Now:
$scope.option2 = "option2 - 1-1";
$scope.options2 = ["option2 - 1-1","option2 - 1-2","option2 - 1-3"];
As you can see the first variable can be found in the array so the value is displayed as currently selected. Now change only the first dropdown to the second item:
$scope.option2 = "option2 - 1-1";
$scope.options2 = ["option2 - 2-1","option2 - 2-2","option2 - 2-3"];
As you can see, $scope.option2 is not changed, but it's no longer in the $scope.options2 array. Therefore its value is not displayer as currently selected.