I am new to react js,
I want to connect two counters in React js, As if one counter value gets increased by one the other counter value should get decreased by one, And on the button click, I need to add a new set of counter pairs. Can anyone suggest to me a solution? Thank you.
If you want to create a counter pair and have to do it multiple times, I would suggest to use custom Hooks.
I have created one for the purpose named useCounter.
Here you have to pass an array of length 2 if initial state of counter.
And the hook will return [couters, updateCounter, err] the array.
You can refer to this code for insight.
Hook: https://codesandbox.io/s/happy-swartz-ikqdn?file=/src/counterHook.js
Component using hook: https://codesandbox.io/s/happy-swartz-ikqdn?file=/src/pair.js
Note: goto https://ikqdn.csb.app/pair in codesandbox browser
Related
I want to use some transition effects in my react js app. I am using function components in my app.
How do I include transition effects in app according to the business requirement these days?
I want to use animation such that on every render I can see the effect. It would be great if someone can help me out with an example.
If you want to use a library, I would suggest react-spring
https://react-spring.io/ it is based on spring physics, If you want to read about that more check this out https://www.joshwcomeau.com/animation/a-friendly-introduction-to-spring-physics/
And there is also another good option which is framer motion https://www.framer.com/motion/ which apparently offers more possibilities maybe out of the box (I personally have never tried it before)
For examples you can check their websites they have good examples.
I'm not sure what effect you are trying to generate.
css can be used by itself to generate animations or transitions.
You want to see the effect on each render?
i.e. You want to tie the effect to the react render cycle?
non-memoized values will change on every render
You could use a simple statement like const trigger = {};
Then react to trigger with a useEffect
useEffect(() => { do something }, [trigger]);
finally, visual effect.. apply a class based on state and use setTimeout to remove the state (and therefore the class)
This could be overly involved for exactly what you are trying to achieve but this works for all possible flows based on the question.
Here is one example with div element is moving to according vertical scroll position .
Look carefully.
First, Set the position using useState and define the window.onscroll function.
const [cardTop, setCardTop] = useState(0);
window.onscroll = function() {
if (window.pageYOffset < 30) {
setCardTop(window.pageYOffset + 'px');
}
};
Second, Set the style's top as state variable.
<div className='card t-card' id='tCard' style={{top:`${cardTop}`}}> ...
Congratulations. It probably act exactly.
It's similar to use Jquery or another Javascript, Only use state variable.
Thanks.
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
I'm stuck in updating states , I'm using a function for generalising a Modal from a 3rd party framework now when I want to update the particular variable I'm stuck as dynamically its not updating ,i.e: Ex: setModalState(...oldstate,v1:{v2:false}} . Here ${v1} and ${v2} are already in old state and I passed to function as props but javascript is not taking insted taking v1,v2;
I have attached few photos for understanding
https://res.cloudinary.com/df2q7cryi/image/upload/v1615998821/error3_svxlcw.png
https://res.cloudinary.com/df2q7cryi/image/upload/v1615998764/eroor2_enjcbc.png
https://res.cloudinary.com/df2q7cryi/image/upload/v1615998762/eroor_bz5wwf.png
Solution is to use | setModalState({...modalstate,[section]:{[purpose]:false}})}
Reference : https://stackoverflow.com/questions/9398535/add-dynamic-key-value-pairs-to-javascript-array-or-hash-table/9398583#:~:text=You%20need%20to%20define%20an,square%20bracket%20and%20dot%20notation.
I am trying to create multiple selection of shapes using transformer of react konva. I want to pass multiple nodes to Transformer. while doing this, i am getting multiple depth exceedederror. i am using a shape ref from the child component and setting it's value. It is with React hooks.
I've commented the setNodes(temp) line. works fine without this. but i want to set it to setNodes.
Here is the demo sandbox link.
You are making infinite loop in this line:
onClick={onSelect(shapeRef)}
Probably you need this instead:
onClick={() => onSelect(shapeRef)}
I am a beginner with React. I want to build an application similar to the page (howmuchtomakeanapp.com). That means that for every choice on a route a user does, a price will be added to the total, but when going back with the back button the price will return to the previous one. I know it is state management but I actually have no clue how to do it even after reading the whole react docs.
The React state is stored locally within a component. When it needs to be shared with other components, it is passed through props. In practice, this means that the component that needs access to a changeable value will keep that value in its state and if it can be changed by subcomponents a callback must be passed to handle the change.
To learn more about components and props, this is the link to the React documentation itself: https://reactjs.org/docs/components-and-props.html.
I recommend you take a look at Redux (https://redux.js.org/), that is a predictable state container for JavaScript apps.
Based on your description I assume you keep your price as a number and add to it the more steps you go further?
I dont think you need to do anything special besides:
My approach would be to keep an array with all the prices, that way you can always remove the last when you click on the prev button. Add one price everytime you select one and navigate to the next route. To display the total you just add the array together:
const prices = [3.5,5,10,5.76,23];
const total = prices.reduce((p, c) => p + c, 0);
Does that help?