I am trying to create a calculator app using React JS. Even though the app is almost complete, I have one small bug. When the clear button is clicked, the numbers on screen becomes 0 but then after if any number key is pressed, the previous number reappears. Here is the code snippet of my app. I guess the bug is present in Display.js file or App.js file.
How to fix this bug?
Thanks in advance!!!
According to your codepen, you need to reset "value" inside of "NumberPad" component.
I've used a useEffect to check if "value" in app.js is set to 0, if so, it sets the "value" in "NumberPad" component as "0".
For your reference:
https://codesandbox.io/s/runtime-wildflower-zt0rv?file=/src/Components/NumberPad.js
The problem is, in NumberPad.js, the handleNumberClick function calls the number function with its own state.
Your clear button has no link to the state saved in the NumberPad
What you can do is lift the state up to App.js so you have only one source of truth for the display to show
Related
I am trying to hide an element 'GorillaSurfIn' after I click on it.
But also it should fire the 'setShouldGorillaSurfOut' to 'true'. The second part works, but after I added this function:
function hideGorillaSurfIn() {
let element = document.getElementById('gorilla-surf-in');
ReactDOM.findDOMNode(element).style.display =
this.state.isClicked ? 'grid' : 'none';
}
After I click, the code falls apart.
Once I click, the element should be hidden/removed till the next time the App restarts.
Here is the Code Sandbox Link for further explanation.
I am open to any solutions, but also explanations please, as I am still fresh in learning React.
I have changed your code a bit to make it work. You can make further changes according to your need. A few things that I would like to add: -
You should avoid using findDOMNode (in most cases refs can solve your problem) as there are certain drawbacks associated with findDOMNode, such as the react's documentation states "findDOMNode cannot be used with functional components".
I've used refs (forward ref in this case) to make it work.
GorillaSurfIn was called twice, so there were two Gorilla gifs on the screen with same IDs. Not sure if that was the intended behaviour but each element should have unique ID.
Check out the code sandbox.
This is my profile settings page: Code
My buttons already call onClick function, but i wanna add saveInfo to my "save" button.
I just noticed that after clicking "save" the only field that remains saved is First Name, can you explain to me why?
I adjusted your code for this to work properly.
Here is an updated sandbox https://codesandbox.io/s/charming-kapitsa-kznoi?file=/src/UserInfo.js
I extracted all of your additional code so it would be easier for me to debug, which is why you won't see some of the code in your original example.
Quite simply, the issue was that you were rendering an empty <input> when saved was not true.
If you want to send your saveInfo simply set the value of each input (when saved isn't true) to the value of your saveInfo.
I left comments within to help understand.
Looks like React DnD expects draggable/droppable items to be siblings in order to work properly. If one of the items belongs to another parent I get "Expected to find a valid target." as soon as the drag over event fires (when the swap should trigger).
I tweaked an example from their docs in case anyone would like to try it out:
broken example: https://codesandbox.io/s/broken-feather-qf0f2?file=/src/Container.jsx
Tweaks are at the bottom. Note that the first card item is rendered separately from the remaining ones, in another div.
In order to trigger the error just drag & drop the first item into another one. Notice that if you drag & drop any other items they will work.
original example: https://codesandbox.io/s/github/react-dnd/react-dnd/tree/gh-pages/examples_hooks_js/04-sortable/simple?from-embed=&file=/src/Container.jsx
Thank you!
Could be an issue with react-dnd.
Check out this issue https://github.com/react-dnd/react-dnd/issues/361
From the issue that I had, the hover handler was updating the table/grid too fast. It was setting the state of the items and I guess DnD applies a new target id, hence the error.
Try adding a debounce on the hover handler with trailing option set to true. The problem is that the component is updating too quickly and the target id that DnD is expecting, has already changed due to the state change. It may help to add some checks in there to make sure that the item is droppable as well.
Due to #DDT's answer, I managed to solve the problem I was experiencing.
In the useDrop function I was updating the table/grid too fast after the update function from immutability-helper.
So I added a state variable e.g. wasDragDropped with an useEffect hook on it.
I change the wasDragDropped variable when useDrag is finished, and then update the table/grid via functionality in the useEffect hook.
(using react-dnd 14.0.4 and react-dnd-html5-backend 14.0.2)
Can i change input value populated from component state from console by using something like document.getElementById('someId').value="some_value" in react
Yes you can.
Whatever the Library/Framework you are using to build your DOM, it will eventually produce DOM, thus, it will be available and accessed as: window, document and everything inside of them.
So, doing the following will update value of the field that matches with the parameter given to the getElementById.
document.getElementById('someId').value="some_value"
I suggest you use React Developer Tools to trace and edit value of state
https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en
Hope this help!
I am following React & Redux. I have actions, reducers working separately. I am managing state more or less properly.
I am trying to create a ui which is having few textboxes and a button(disabled). In text boxes i had added onchange event on which it call a function
onChangeTextbox(){
}
In this function I do the following thing.
1. I update the state of the redux store.
onChangeTextbox(){
updateStateOfTextBox();
}
2.After doing this I look for whether all the text boxes, in the ui, is having something in it. If so I will enable my button to do further operations.
onChangeTextbox(){
updateStateOfTextBox();
updateStateOfButton();
}
Everything is working good except the one thing.
That one thing is as soon as I give the last empty textbox one character, the button is not enabled immediately, and when I give more character the button gets enabled. Similarly vice versa for disabling button.
The problem which I found is that when control complete its job of function updateStateOfTextBox(); and enters the updateStateOfButton(); function the state remains same. And again when render() occurs the change in state is reflected then.
I want to fix that issue and I am not getting any way out. Any solution and suggestion to this will be appreciated.
Thanks.
I found the solution to such situation.
componentsWillRecieveProps(newProps){
}
this method of the life cycle changes the game.
componentsWillRecieveProps(newProps){
newProps.state // this will give you new updated state which your action updated.
this.props.state // this will give you local or your state
// Here you can update your local state with global state
// And call the other function here as
updateStateOfButton();
}
Therefore the solution can be interpreted like
onChangeTextbox(){
updateStateOfTextBox();
}
componentsWillRecieveProps(newProps){
.
.
updateStateOfButton();
}