In this part, we will make a simple app that helps you create, edit, update and delete records of foodstuff and their costs. At the end of this part, you would be able to:
- Make CRUD applications with React.
- Have a better understanding of React.
- Compose (Bring together) several components to make a user interface.
- Show the whole world a portfolio of yours in React.
Get the full source code of foodReca on Github:
codingnninja
/
FoodReca
A React project that teaches how to make CRUD applications.
FoodReca- React crub github
A React project that teaches how make CRUD applications.
Let's get started.
We need a store to keep the information on our foodstuff, so we are making use of React state to do just that.
App.js
this.state above is the store for our simple application (FoodReca). The state contains id, userId, food, cost, status, foodItem, foodItems, and editing.
Id, userId, food, cost and status are properties of the foodItem, that is, we will put all of them into the foodItem object as in below:
foodItem: {
id: null
userId: 1,
food: '',
cost: 0
status: false
}
Then, we will - when we have different kinds of food - put all of them into foodItems array as in below:
foodItems: [
{id: 1, userId: 1, food: 'Rice', cost: 100, status: false},
{id: 2, userId: 1, food: 'Beans', cost: 200, status: false}
]
All we did above is like packing many units of cookies/biscuits into a pack and then put many packs of such cookies/biscuits in a carton and put everything in a store (this.state).
Setting up components.
Let's set up some components:
AddFoodItemForm.js
AddFoodItemForm is the FoodReca’s component that takes inputs for each of the food stuff. It has two inputs, food and cost. We pass food, cost and some methods to AddFoodItemForm as React props and access them as {props.food}, {props.cost} and {props.handleInputChange}.
EditFoodItemForm.js
EditFoodItemForm is the FoodReca’s component that is responsible for editing any existing foodItem. It is almost the same as AddFoodItemForm.
FoodItemList.js
AddFoodList is the FoodReca’s component that displays all food items as a list. We pass some properties and methods to AddFoodList through React props and access them as {props.editFoodItem}, {props.cost} and so on.
Adding food items to the store.
Wait a minute!
How do you add items to your store in the real world? You break the door. You break the roof or you destroy the store.
Think about this question and let your answers guide you while dealing with React state.
Let’s add food items to the store (this.state).
Let's start with:
this.handleInputChange = this.handleInputChange.bind(this);
this.AddFoodItem = this.AddFoodItem.bind(this);
As bind( ) needs a separate tutorial to explain it understandably, I recommend you read about it HERE .
Getting inputs from a form.
handleInputChange(event) {
const target = event.target;
const value = target.value;
const name = target.name;
this.setState({
[name]:value
})
}
This method ( handleInputChange ) takes inputs and put them in React state. event.target refers to the input box, target.value gets whatever is written in the input box, target.name get the name of the input box and we use this.setState( ) to put them in the state.
Adding cost, food and others to foodItem.
Since handleInputChange has done its job by taking users’ inputs and pairing such inputs with food and cost, addFoodItem only needs to pack food, cost and other non-dynamic values into an object named foodItem. Finally, foodItem will be packed into an array named foodItems just like packing units of cookies into packs and packs into cartons.
After adding food and cost to foodItem, we set them to an empty string so that the input boxes will be empty after the addItem button is clicked.
The most important thing to pay attention to are this.setState( ) and […this.state.foodItems, foodItem ]. this.setState( ) changes values of properties in this.state and […this.state.foodItems, foodItem] takes existing foodItems in the state and adds a new food item to it.
Displaying food items.
We are going to use the previously created components: FoodItemList, AddFoodItem and EditFoodItem.
To display food items, we need to pass down some data and methods which are used by the components.
const { cost, food, foodItems, editing } = this.state;
The above code helps us get all the data/properties we need from the state so as to use them in the components.
It is necessary to pay attention to how the ternary operator is used to render AddFoodItemForm and EditFoodItemForm. When editing is set to false, AddFoodItemForm will be displayed while EditFoodItemForm will be displayed if editing is set to true. After display food items, what next?
Deleting food items.
Whenever the delete button on a food item is clicked, the id of such item is passed to deleteFoodItem to delete the item. As the footItems is an array of objects, we call filter to remove any item that has the same id with the food item clicked.
Then, this.setState( ) is used to update foodItems in the state by setting it to the current value.
deleteFoodItem(id) {
const foodItems = this.state.foodItems.filter( item => item.id !== id );
this.setState({foodItems: foodItems});
}
Setting food item’s status (Bought or Pending).
In this case, there is a need to toggle between “pending” and “bought”. We do that by passing the current food item to boughtFoodItem method and updates the status of the clicked item to either true or false.
Then, it loops through this.state.foodItems to get any food item that has the same id as the food item passed to boughtFoodItem. Once any food item with the same id is found, such item will be replaced with the updated current food item and if it doesn’t find any item, nothing will be updated.
//this does the checking explained above.
foodItem.id === currentFoodItem.id ? updatedCurrentFoodItem : foodItem;
Editing food items.
EditFoodItem sets the input boxes to the value of the food item selected so that users can edit them. It is very similar to addFoodItem but a bit different because it sets editing to true to use EditFoodItemForm.
SetEditing only updates editing to either true or false through this.setState( ). It will throw an error if a non-boolean value is passed to it.
Updating food items.
Updating food items is similar to how we updated the state in boughtFoodItem. The only difference is that we have more properties to update in this case.
So, let’s test your understanding on how to update React state based on what you have learnt in this article.
Explain this to yourself aloud! Big Brother is watching you.
Conclusion:
You have learnt how to create, edit, update and delete a React component in this tutorial without mutating the state. It is always good to only mutate the state with this.setState( ) or Hooks.
Pay great attention to the lines below because they are the basic you will always use in any React application.
1: Method Binding
this.handleInputChange = this.handleInputChange.bind(this);
2: Adding to state
this.setState({
foodItems: [...this.state.foodItems, foodItem]
})
3: Deleting from state
const foodItems = this.state.foodItems.filter( item => item.id !== id );this.setState({foodItems: foodItems});
4: Updating the state
const updatedFoodItem = Object.assign({}, this.state.foodItem, { food: updatedFood, cost: updatedCost })
And make sure you understand how editFoodItem changes the components. Above all, there are other ways to achieve all I listed above but you need to understand whatever you do.
Feel free to point out anything that could have been better!
Check my other React tutorials on You Too Can Code
Thanks for reading!
Best regards,
Ayobami.
Follow me on twitter: codingnninja
Top comments (5)
Hi Ayobami i hope that everything is going well, i want to let you know that im having problems implementing the updating part, the thing is that i have used axios to get the data and then update the info. So in this example u have updated the just state, im kindly ask u to teach me how to update an end point, or point me to the right direction to do it. ty in advance
It seems you know how to fetch data as you have data already. These are things you can watch out for:
Update the state from a lifecycle such as component DidMount.
The data you get could be used to update what you have in the state from the lifecycle.
Make sure the data you get is compatible to the data in the state.
I have a tutorial in my draft since last year on this, may be I would create time to release it soon.
Just chat me up privately if you are still unable to solve the problem.
Best Regards,
Ayobami.
lifesaver! - Following ;)
Wow! I am glad it saved your time.
thanks brother