Sorting in React and using a simple react library to animate a text
While doing my project using React application I had to do some stretch goals one of them that I did was sorting and the other was animating a text using a React library. First , let me go to the sorting. At first I did a sorting while rendering a list in the ascending alphabetical order but then I was not happy with the result. Started searching on the internet and decided to do the sorting with clicking on a button first would sort it in ascending order and clicking on it again would sort it in descending order.
I created the sort button in the component where the list was and where I would like to do the sorting and then made a method in the parent class component. On the button in the child component I put a onClick function and then passed it the method I created in the parent component as props.
First inside the parent class I put value inside the state and gave a default value of zero. So, what this value is it counts the number of times the sort button is clicked.Inside the state in the parent class I had two other state one is the list I am sorting and another is also copy of the same list with a different variable name , I used two variables having the same data to use for some other method in my code. So, back to the sorting what I did was put a conditional , the condition being that the list would be sorted in the ascending order on first click and then on the second click it would be sorted in the descending order. The condition I put was that for odd number of times the list is clicked it would sort in ascending order and for even number of times it would be clicked in descending order and inside the conditional put the setState method I used the .sort() function . I also put a .toLowerCase() function because .sort() function is case sensitive and the binary value of a letter in uppercase and lowercase are different and it takes that into count.
For my project, I did a very simple animation with react animated-text library.
For installation
Install — save react animated-text
Then imported it in the components that I was using it in. This library comes with several animations, I used a random animation in one component and a wave animation in another component .When importing the react animated text I put the animations as component.
One thing to note is trying to put wave inside the <p></p> tag would give error so if trying to put the <wave/> component always put it inside a div tag and if you want to add styling to it put a style inside the <div></div> tag which contains the <wave /> component.
Reference
