I wish to update particular input value, I suceeded to do so with one dimensional array but unfortunatelly in my case 2d is necessary and I have no idea how to do so as I tried already all combinations of rows and cells.
Here is link to demo -> https://codesandbox.io/s/stoic-mirzakhani-46exz?file=/src/App.js
Basically, thing is that after typing some value to for example X-axis in first row, I wish only this field value to be updated. I have button which can add new row to inputValue which contains all input titles, and contents.
Another thing is that if I write something to the input now, it transforms aray into object and because of that app crash
Alright, so you had a few issues going on here, but overall it was a good effort!
You were attempting to update the state directly instead of using the mutation function provided by array destruction and hooks
In the state update, you were not merging objects properly leading to the same value to be passed
You were not using props properly
To address these I made a new input component that tracks each component row and col inside its props. Then these values will be used alongside the prop drilled mutation function and retrieved content value from your chunk component.
Please let me know if this is not working
Below is a link to the working version, please look at the console to see the updates and there is a button that will print the current value of inputValue for you as well. State now also updates as you enter.
Edit: I have addressed your comment and fixed the example so that it follows your request. I went ahead and switched to using the useReducer hook instead now as it makes the logic a little easier to understand and to read in my opinion. Feel free to try to figure it out with useState too, if you wanted to do that. For now, though here is the link again: https://codesandbox.io/s/prod-resonance-wokey?fontsize=14&hidenavigation=1&theme=dark
Related
EDIT: I got that! it is because the state of both of them different, the once with the array has an initial state of array, so obviously nothing wrong there! got it! no need to answer
In the attached image, I use twice useEffect in order to bring data from a server.
One fucntion (white draw), bring array of prodcuts from the server and the second function bring a single product.
When I tried to display the one products React show me an error, and I check about it,and understood I have to use conditional rendring first, why?
Cause in the first time the component render, their is still no product so it display Error, So, First I have to "check" if there is one and then give it an order to display it, I got that, that makes sense, but, why all the mentioned above dont apply to the time Im trying to bring array of products (red draw)? Also here, in the first render, there are still no products and I should get an Error!
I am experimenting with the useReducer hook in React
here is my following code in sandbox:
https://codesandbox.io/s/usedispatch-users-c58t4?file=/src/App.js
I create a user object with an empty array called interests. The array is initially empty and I have a form to add interests into the array per every instance of a user. This can be found in my 'User' component
in my reducer function with the case of 'ADD_INTEREST' I'm having a hard time understanding why I have to re-assign all the current user values with my action.payload before I add an interest into my interests array. I have been messing around for a bit and I can't seem to get it to work without having those values there. I know I'm missing something somewhere. Any feedback would be much appreciated. Thanks
My problem
I'm trying to add a component to an array at the input of a user(here the Building component).
My problem is that everything i add in this array is somehow duplicated and i can't explain it.
I also wasn't able to reproduce the problem in codesandbox but here is my town component that adds new Building components :
https://codesandbox.io/s/goofy-bhabha-yb6sq
The problem lies in the function addBuilding, because the position is added there and the duplicate does not contain the same position as the prévious building.
I've also made sure that the function is not called two times, à console.log inside the function told me that.
In this function i :
Copy the object i receive from a parent component (props.addBuild).
Create à new position .
add the position to the copy of the object.
give it a key number.
add it to the set.
done.
What happens :
I made sure there is no other push nowhere else (i've commented this function and nothing showed up as i triggered the addition of a new building)
As the component re-renders the duplication occurs.
What i've tried so far
I've tried using set instead of arrays which gives me the same
result.
I've also tried to copy the state and use the setState at the end which resulted in a too much calls of setState.
Pop the entire content of my state and push back the once that i want to keep.
I've also tried to add the function somewhere else in my program and got the same results.
A thing that would be a bit trashy but could solve my problem would be to remove duplicates from the array or set and add them back in the array. I've tried this and got too much calls to render error. But i'm sure there might be a way i have not tried.
Another detail is that i'm using electron.
Any help is welcome.
I've solved my problem by moving up my code in the parent component like suggested by #Sulthan.
But also instead of using a state i used a function so instead of passing a state as a prop to the town component i directly called the function that added a building to the list of building.
Here is what it looks like :
https://codesandbox.io/s/goofy-bhabha-yb6sq?file=/src/App.js
I still can't explain what happened but the state that called the function addBuilding provoked a second call of this function.
I working on my web app
I set there a store with react redux,
I have a form with 4 input type number which after pressing a button dispatching to the store as an array, then I have some others inputs that I’d like to get a value of the first 4 as a placeholders but when I change the value it should update the right place in the store , here is my problem , when I change its value (by typing) it change all the values in all the arrays connected in the store
It’s like the store works both sides , is there way to stop it ?
Thank you
It's hard to tell what your exact problem is without any code, but it sounds to me like you are overwriting the whole state of your array. Again, I can't be sure without code, but my suggestion is you spread existing state, and add your new array or whatever it is to the end in your reducer where that action is defined.
return [...state, action.newData]
I have two context types: (1) productsContexts & (2) rangeContext.
rangeContext is nothing more than preset ranges from a json file so as to group the products according to each respective range.
Below is an illustration of a side-box component that groups products
according to those preset ranges and it also illustrates the problem:
The first visit to that page, everything works fine, but click off and then re-visit the page and the previous data remains and then doubles itself, 3rd time, it is triple, and so on.
I did nothing with the rangeContext data but pass it along to a local variable for mapping data manipulation. I did not save anything to the context itself.
Here is what I have tried to do to solve this problem; all have failed:
I passed the rangeContext to state first, then on componentWillUnmount, I initialized state.
I Object.assign() the rangeContext to the local variable instead of directly passing the context to the local variable.
I took the context completely out of this component and used it in it's parent, and passed it to this component as props.
Nothing is working. While the hard data does not change, the range component never gets initialized on unmount and revisiting the page just carries forward what was in the range in the last visit and adds to it.
I know I probably did not do a great job explaining, but I know the problem is related to the context and I sure do not want to hit the database again, as I already did that for an earlier component.
Does anyone recognize the problem and have a solution?
Thanks
UPDATE:
I moved contextTypes for ranges out of the side-box component.
Using redux flux, I dispatched for the range-actions in side-box's parent and passed the ranges to side-box as props. The problem went away, but I am not happy. I need someone to tell me why this is the right things to do, as ...
I had already called range-actions in a previous component, so why not put it in contextTypes instead of calling redux again?
Where as I only had 3 lines of code on side box, I have the same amount of code lines since now I am calling propTypes, but now I also have
MORE LINES of code in the parent calling redux, something I had already done for the range data in a previous component.
I would greatly appreciate someone telling me if I am still doing this
all wrong, or why it is right I had to add 26 more REDUNDANT lines of
code calling redux flux?