What Javascript iterators to use for CRUD in REACT

Just starting out with React and not sure what array iterator or method you need to get your page to re-render(without refreshing) with your updated information using state? This guide will help you understand which one to use for each specific CRUD action.

First we need to understand what it is we are trying to accomplish. In this example we are only asked to be able to render all the stocks onto the page, be able to add and remove stocks to our portfolio, sort stocks alphabetically or by price, and lastly filter stocks based on their type. I will jump to a different project to show you deleting and updating. Note that a stock has a name, price, type, id, and ticker

Second lets get our data from our external api, this one is one of the easier ones all we need to do is fetch our data from the api. In this example I am using a class component and setting state. All we want to do is get our stocks from the external api so we need a fetch and then set state. I am using stocks and displayStocks keys so that I can filter and sort later on without adjusting the original stocks array.

Third we want figure out how to add and remove stocks to and from our portfolio. Make sure you have a way to access these functions. I chose to pass these functions down to the stock and portfolio containers and added an onClick to the div that contains each stock and when its clicked these functions get fired off. So to add a stock to the portfolio we will setState and update the portfolio. I set up a ternary conditional that basically checks to make sure that the portfolio does not already have the stock in it(so we don’t get duplicates of the same stock in our portfolio). If the stock is already in the portfolio then I set portfolio to the same portfolio as before but if it is not then I add the stock to the portfolio using the spread operator.

To remove a stock from the portfolio we will setState again for portfolio. this time we will filter through our existing portfolio and only pass stocks that do not match our stock that we are trying to remove. This will return an array with all the stocks that do not equal the stock we selected to remove.

Next we will learn how to sort our stocks alphabetically or by price. Again make sure you have access to these functions where you need to so you can call on them when they are selected. For the alphabetical sort(alphaSort for short) we will setState for our displayStocks now. We need to set our displayStocks to all stocks that have been sorted by name. To sort alphabetically we will use the sort method. Since stocks is an array of objects we have to get a little tricky to get it to work. We will use 2 stocks as arguments and then do a ternary conditional that is basically checking if the first stocks name is greater than the second stocks name if it is greater than it gives it an index value of one higher and if it is not greater than it will give it an index value of one lower. Sort is an interesting method because it checks items by changing them to strings then comparing them based on their UTF-16 values(link at the bottom).

Sorting by numbers is a bit simpler to understand, to do the priceSort we will set our function up the exact same way except our sort will be slightly different. In our sort if we want our stocks to be ascending based on price (lowest to highest) so we will take stock1.price — stock2.price, if we wanted this to be descending then we would just take stock2.price and subtract stock1.price from it(stock2.price — stock1.price)

Now lets take a look at filtering stocks by type, once again we are setting state for the displayStocks. We are going to all the stocks but filtered to match the type that we selected. If the stock.type is equal to the type we selected it gets to remain in the array if it doesn’t match it is not kept in the array.

We are going to make a switch to a different project so we can go over how to re-render the DOM based on updating and deleting objects. In these two examples we are adding a like to a toy and deleting a toy, both of these will persist and re-render on the page without a refresh. Note that a toy has a name, image, likes, and an id.

To update an object and have that updated object re-render on the page without a refresh we will setState and map through our toys. For every object(toy) in our toys array will do a ternary conditional that checks if the objects id is equal to our updated toys id. If the ids are equal than the object gets replaced with the updated toy.

Lastly we will go over how to delete an object and have it removed from the page. No surprise here but we will set state for toys and filter through all the toys. For every toy in our toys array we are checking to see if the ids are not equal to the toys id that we are trying to get rid of. Only the toys with ids that are not equal to the deleted toys id are kept inside the array.

link to better understand the sort method:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort