DEV Community: Moha Saket

Updating Existing State in React

Moha Saket — Sun, 19 Dec 2021 18:16:34 +0000

how we update state based off of existing values in the state.
So I have a score value in the state.
Imagine this is a game and when we click this button single kill I want it to add one to the score value.

it's best if you are updating existing values in the state to use the callback form .So this magic callback form.
What's that look like this upset state and we pass in a callback function instead of passing in an object and instead of that callback function we make the current state a parameter and it should return an object that represents the new state.
So here's an example we can set state will pass in a function and we need to add this parameter current state or you can just call it state.

TO DO LIST WITH ANGULAR

Moha Saket — Mon, 13 Dec 2021 07:31:10 +0000

At this point, we are ready to start creating our to-do list application using Angular. The finished application will display a list of to-do items and includes editing, deleting, and adding features. In this article you will get to know your application structure, and work up to displaying a basic list of to-do items.
check this link
to do list

How to create a Dice Rolling App using ReactJS

Moha Saket — Mon, 13 Dec 2021 07:12:05 +0000

There are two components Die and RollDice. The Die component is responsible to show one individual Dice. It is a stateless component. It uses the font-awesome library to show the standard dots on the upper face of the dice. RollDice component contains all the logic to generates random numbers to show on the upper face of the dice, roll each dice upon click on the roll button. There are two states involve in the RollDice component named ‘die1’ and ‘die2’. Each one has initialized with the value one i.e. each die shows one(one dot) when the application first starts.

Now, we set the click event handler to the roll dice button and when anyone clicks on the button we change the state of both die1 and die2 to some random number using setState from one to six (we use a number as a word since font-awesome library deals with word number to show the exact number of dots). We also make sure when the dice is rolling user can’t click on the button again. For this purpose we use a state ‘rolling’ initially set to false and when the dice are rolling set rolling to true and start a timer of one second. After one second again set rolling state to false’. Disable the button when a rolling state is set to true.
This is a rough overview of the application. go to this link