Basic Operations

react crud tutorial introduction storing data on parse is built around the parse object parse object class each parse object parse object contains key value pairs of json compatible data this data is schemaless, which means that you don’t need to specify ahead of time what keys exist on each parse object parse object you can simply set whatever key value pairs you want, and our backend will store it you can also specify the datatypes according to your application needs and persist types such as number number , boolean boolean , string string , datetime datetime , list list , geopointers geopointers , and object object , encoding them to json before saving parse also supports store and query relational data by using the types pointers pointers and relations relations in this guide, you will learn how to perform basic data operations through a crud example app, which will show you how to create, read, update and delete data from your parse server database in react you will first create your component functions for each crud operation, using them later in a complete screen layout, resulting in a to do list app prerequisites to complete this tutorial, you will need a react app created and connected to back4app if you want to test/use the screen layout provided by this guide, you should set up the ant design ant design library goal to build a basic crud application in react using parse 1 creating data objects the first step to manage your data in your parse database is to have some on it let’s now make a createtodo createtodo function that will create a new instance of parse object parse object with the “todo” subclass the to do will have a title ( string string ) describing the task and a done( boolean boolean ) field indicating whether the task is completed javascript 1 const createtodo = async function () { 2 // this value comes from a state variable 3 const newtodotitlevalue = newtodotitle; 4 // creates a new todo parse object instance 5 let todo = new parse object('todo'); 6 todo set('title', newtodotitlevalue); 7 todo set('done', false); 8 // after setting the to do values, save it on the server 9 try { 10 await todo save(); 11 // success 12 alert('success! to do created!'); 13 // refresh to dos list to show the new one (you will create this function later) 14 readtodos(); 15 return true; 16 } catch (error) { 17 // error can be caused by lack of internet connection 18 alert(`error! ${error message}`); 19 return false; 20 }; 21 };1 const createtodo = async function () promise\<boolean> { 2 // this value comes from a state variable 3 const newtodotitlevalue string = newtodotitle; 4 // creates a new todo parse object instance 5 let todo parse object = new parse object('todo'); 6 todo set('title', newtodotitlevalue); 7 todo set('done', false); 8 // after setting the to do values, save it on the server 9 try { 10 await todo save(); 11 // success 12 alert('success! to do created!'); 13 // refresh to dos list to show the new one (you will create this function later) 14 readtodos(); 15 return true; 16 } catch (error any) { 17 // error can be caused by lack of internet connection 18 alert(`error! ${error message}`); 19 return false; 20 }; 21 }; notice that if your database does not have a todo todo table (or subclass) in it yet, parse will create it automatically and also add any columns set inside the parse object parse object instance using the parse object set() parse object set() method, which takes two arguments the field name and the value to be set 2 reading data objects after creating some data in your database, your application can now be able to read it from the server and show it to your user go ahead and create a readtodos readtodos function, which will perform a parse query parse query , storing the result inside a state variable javascript 1 const readtodos = async function () { 2 // reading parse objects is done by using parse query 3 const parsequery = new parse query('todo'); 4 try { 5 let todos = await parsequery find(); 6 // be aware that empty or invalid queries return as an empty array 7 // set results to state variable 8 setreadresults(todos); 9 return true; 10 } catch (error) { 11 // error can be caused by lack of internet connection 12 alert(`error! ${error message}`); 13 return false; 14 }; 15 };1 const readtodos = async function () promise\<boolean> { 2 // reading parse objects is done by using parse query 3 const parsequery parse query = new parse query('todo'); 4 try { 5 let todos parse object\[] = await parsequery find(); 6 // be aware that empty or invalid queries return as an empty array 7 // set results to state variable 8 setreadresults(todos); 9 return true; 10 } catch (error any) { 11 // error can be caused by lack of internet connection 12 alert(`error! ${error message}`); 13 return false; 14 }; 15 }; many constraints and orderings can be applied to your queries using the parse query parse query class, but for now, we will stick to this simple query, which will retrieve every saved todo todo object 3 updating data objects updating a parse object parse object instance is very similar to creating a new one, except that in this case, you need to assign the previously created objectid objectid to it and then save, after setting your new values javascript 1 const updatetodo = async function (todoid, done) { 2 // create a new todo parse object instance and set todo id 3 let todo = new parse object('todo'); 4 todo set('objectid', todoid); 5 // set new done value and save parse object changes 6 todo set('done', done); 7 try { 8 await todo save(); 9 // success 10 alert('success! to do updated!'); 11 // refresh to dos list 12 readtodos(); 13 return true; 14 } catch (error) { 15 // error can be caused by lack of internet connection 16 alert(`error! ${error message}`); 17 return false; 18 }; 19 };1 const updatetodo = async function ( 2 todoid string, 3 done boolean, 4 ) promise\<boolean> { 5 // create a new todo parse object instance and set todo id 6 let todo parse object = new parse object('todo'); 7 todo set('objectid', todoid); 8 // set new done value and save parse object changes 9 todo set('done', done); 10 try { 11 await todo save(); 12 // success 13 alert('success! to do updated!'); 14 // refresh to dos list 15 readtodos(); 16 return true; 17 } catch (error any) { 18 // error can be caused by lack of internet connection 19 alert(`error! ${error message}`); 20 return false; 21 }; 22 }; since this example app represents a to do list, your update function takes an additional argument, the done done value, which will represent if the specific task is completed or not 4 deleting data objects to delete a data object, you need to call the destroy() destroy() method in the parse object parse object instance representing it please be careful because this operation is not reversible javascript 1 const deletetodo = async function (todoid) { 2 // create a new todo parse object instance and set todo id 3 const todo = new parse object('todo'); 4 todo set('objectid', todoid); 5 // destroy should be called to delete a parse object 6 try { 7 await todo destroy(); 8 alert('success! to do deleted!'); 9 // refresh to dos list to remove this one 10 readtodos(); 11 return true; 12 } catch (error) { 13 // error can be caused by lack of internet connection 14 alert(`error ${error message}`); 15 return false; 16 }; 17 };1 const deletetodo = async function (todoid string) promise\<boolean> { 2 // create a new todo parse object instance and set todo id 3 let todo parse object = new parse object('todo'); 4 todo set('objectid', todoid); 5 // destroy should be called to delete a parse object 6 try { 7 await todo destroy(); 8 alert('success! to do deleted!'); 9 // refresh to dos list to remove this one 10 readtodos(); 11 return true; 12 } catch (error any) { 13 // error can be caused by lack of internet connection 14 alert(`error! ${error message}`); 15 return false; 16 }; 17 }; let’s now use these four functions in a complete component, so you can test it and make sure that every crud operation is working properly 5 using crud in a react component here is the complete component code, including styled user interface elements (using ant design ant design ), state variables, and calls to your crud functions you should create a separate component in a file called todolist js/todolist tsx todolist js/todolist tsx in your src src directory containing the following code or add it directly to your main application file ( app js/app tsx app js/app tsx ) todolist js 1 import react, { usestate } from 'react'; 2 import parse from 'parse/dist/parse min js'; 3 import ' /app css'; 4 import { button, input, list } from 'antd'; 5 import { 6 checkoutlined, 7 closeoutlined, 8 plusoutlined, 9 redooutlined, 10 } from '@ant design/icons'; 11 12 export const todolist = () => { 13 // state variables 14 const \[readresults, setreadresults] = usestate(\[]); 15 const \[newtodotitle, setnewtodotitle] = usestate(''); 16 17 // functions used by the screen components 18 const createtodo = async function () { 19 // this value comes from a state variable 20 const newtodotitlevalue = newtodotitle; 21 // creates a new todo parse object instance 22 let todo = new parse object('todo'); 23 todo set('title', newtodotitlevalue); 24 todo set('done', false); 25 // after setting the to do values, save it on the server 26 try { 27 await todo save(); 28 // success 29 alert('success! to do created!'); 30 // refresh to dos list to show the new one (you will create this function later) 31 readtodos(); 32 return true; 33 } catch (error) { 34 // error can be caused by lack of internet connection 35 alert(`error! ${error message}`); 36 return false; 37 } 38 }; 39 40 const readtodos = async function () { 41 // reading parse objects is done by using parse query 42 const parsequery = new parse query('todo'); 43 try { 44 let todos = await parsequery find(); 45 // be aware that empty or invalid queries return as an empty array 46 // set results to state variable 47 setreadresults(todos); 48 return true; 49 } catch (error) { 50 // error can be caused by lack of internet connection 51 alert(`error! ${error message}`); 52 return false; 53 } 54 }; 55 56 const updatetodo = async function (todoid, done) { 57 // create a new to do parse object instance and set todo id 58 let todo = new parse object('todo'); 59 todo set('objectid', todoid); 60 // set new done value and save parse object changes 61 todo set('done', done); 62 try { 63 await todo save(); 64 // success 65 alert('success! to do updated!'); 66 // refresh todos list 67 readtodos(); 68 return true; 69 } catch (error) { 70 // error can be caused by lack of internet connection 71 alert(`error! ${error message}`); 72 return false; 73 } 74 }; 75 76 const deletetodo = async function (todoid) { 77 // create a new todo parse object instance and set todo id 78 let todo = new parse object('todo'); 79 todo set('objectid', todoid); 80 // destroy should be called to delete a parse object 81 try { 82 await todo destroy(); 83 alert('success! to do deleted!'); 84 // refresh to dos list to remove this one 85 readtodos(); 86 return true; 87 } catch (error) { 88 // error can be caused by lack of internet connection 89 alert(`error! ${error message}`); 90 return false; 91 } 92 }; 93 94 return ( 95 \<div> 96 \<div classname="header"> 97 \<img 98 classname="header logo" 99 alt="back4app logo" 100 src={ 101 'https //blog back4app com/wp content/uploads/2019/05/back4app white logo 500px png' 102 } 103 /> 104 \<p classname="header text bold">{'react on back4app'}\</p> 105 \<p classname="header text">{'to do list'}\</p> 106 \</div> 107 \<div classname="container"> 108 \<div classname="flex between"> 109 \<h2 classname="list heading">todo list\</h2> 110 {/ to do read (refresh) button /} 111 \<button 112 type="primary" 113 shape="circle" 114 color={'#208aec'} 115 size={'default'} 116 onclick={readtodos} 117 icon={\<redooutlined />} 118 >\</button> 119 \</div> 120 \<div classname="new todo wrapper flex between"> 121 {/ todo create text input /} 122 \<input 123 value={newtodotitle} 124 onchange={(event) => setnewtodotitle(event target value)} 125 placeholder="new todo" 126 size="large" 127 /> 128 {/ todo create button /} 129 \<button 130 type="primary" 131 classname="create todo button" 132 color={'#208aec'} 133 size={'large'} 134 onclick={createtodo} 135 icon={\<plusoutlined />} 136 > 137 add 138 \</button> 139 \</div> 140 \<div> 141 {/ todo read results list /} 142 {readresults !== null && 143 readresults !== undefined && 144 readresults length > 0 && ( 145 \<list 146 datasource={readresults} 147 renderitem={(item) => ( 148 \<list item classname="todo item"> 149 \<p 150 classname={ 151 item get('done') === true 152 ? 'todo text done' 153 'todo text' 154 } 155 > 156 {item get('title')} 157 \</p> 158 \<div classname="flex row"> 159 {/ todo update button /} 160 {item get('done') !== true && ( 161 \<button 162 type="primary" 163 shape="circle" 164 classname="todo button" 165 onclick={() => updatetodo(item id, true)} 166 icon={ 167 \<checkoutlined classname="todo button icon done" /> 168 } 169 >\</button> 170 )} 171 {/ todo delete button /} 172 \<button 173 type="primary" 174 shape="circle" 175 classname="todo button" 176 onclick={() => deletetodo(item id)} 177 icon={ 178 \<closeoutlined classname="todo button icon remove" /> 179 } 180 >\</button> 181 \</div> 182 \</list item> 183 )} 184 /> 185 )} 186 \</div> 187 \</div> 188 \</div> 189 ); 190 }; todolist tsx 1 import react, { usestate, fc, reactelement } from 'react'; 2 import ' /app css'; 3 import { button, input, list } from 'antd'; 4 import { 5 checkoutlined, 6 closeoutlined, 7 plusoutlined, 8 redooutlined, 9 } from '@ant design/icons'; 10 const parse = require('parse/dist/parse min js'); 11 12 export const todolist fc<{}> = () reactelement => { 13 // state variables 14 const initialreadresults parse object\[] = \[]; 15 const \[readresults, setreadresults] = usestate(initialreadresults); 16 const \[newtodotitle, setnewtodotitle] = usestate(''); 17 18 // functions used by the screen components 19 const createtodo = async function () promise\<boolean> { 20 // this value comes from a state variable 21 const newtodotitlevalue string = newtodotitle; 22 // creates a new todo parse object instance 23 let todo parse object = new parse object('todo'); 24 todo set('title', newtodotitlevalue); 25 todo set('done', false); 26 // after setting the to do values, save it on the server 27 try { 28 await todo save(); 29 // success 30 alert('success! to do created!'); 31 // refresh to dos list to show the new one (you will create this function later) 32 readtodos(); 33 return true; 34 } catch (error any) { 35 // error can be caused by lack of internet connection 36 alert('error!' + error message); 37 return false; 38 } 39 }; 40 41 const readtodos = async function () promise\<boolean> { 42 // reading parse objects is done by using parse query 43 const parsequery parse query = new parse query('todo'); 44 try { 45 let todos parse object\[] = await parsequery find(); 46 // be aware that empty or invalid queries return as an empty array 47 // set results to state variable 48 setreadresults(todos); 49 return true; 50 } catch (error any) { 51 // error can be caused by lack of internet connection 52 alert('error!' + error message); 53 return false; 54 } 55 }; 56 57 const updatetodo = async function (todoid string, done boolean) promise\<boolean> { 58 // create a new to do parse object instance and set todo id 59 let todo parse object = new parse object('todo'); 60 todo set('objectid', todoid); 61 // set new done value and save parse object changes 62 todo set('done', done); 63 try { 64 await todo save(); 65 // success 66 alert('success! to do updated!'); 67 // refresh todos list 68 readtodos(); 69 return true; 70 } catch (error any) { 71 // error can be caused by lack of internet connection 72 alert('error!' + error message); 73 return false; 74 } 75 }; 76 77 const deletetodo = async function (todoid string) promise\<boolean> { 78 // create a new todo parse object instance and set todo id 79 let todo parse object = new parse object('todo'); 80 todo set('objectid', todoid); 81 // destroy should be called to delete a parse object 82 try { 83 await todo destroy(); 84 alert('success! to do deleted!'); 85 // refresh to dos list to remove this one 86 readtodos(); 87 return true; 88 } catch (error any) { 89 // error can be caused by lack of internet connection 90 alert('error!' + error message); 91 return false; 92 } 93 }; 94 95 return ( 96 \<div> 97 \<div classname="header"> 98 \<img 99 classname="header logo" 100 alt="back4app logo" 101 src={ 102 'https //blog back4app com/wp content/uploads/2019/05/back4app white logo 500px png' 103 } 104 /> 105 \<p classname="header text bold">{'react on back4app'}\</p> 106 \<p classname="header text">{'to do list'}\</p> 107 \</div> 108 \<div classname="container"> 109 \<div classname="flex between"> 110 \<h2 classname="list heading">todo list\</h2> 111 {/ to do read (refresh) button /} 112 \<button 113 type="primary" 114 shape="circle" 115 color={'#208aec'} 116 onclick={readtodos} 117 icon={\<redooutlined />} 118 >\</button> 119 \</div> 120 \<div classname="new todo wrapper flex between"> 121 {/ todo create text input /} 122 \<input 123 value={newtodotitle} 124 onchange={(event {target {value string}}) => setnewtodotitle(event target value)} 125 placeholder="new todo" 126 size="large" 127 /> 128 {/ todo create button /} 129 \<button 130 type="primary" 131 classname="create todo button" 132 color={'#208aec'} 133 size={'large'} 134 onclick={createtodo} 135 icon={\<plusoutlined />} 136 > 137 add 138 \</button> 139 \</div> 140 \<div> 141 {/ todo read results list /} 142 {readresults !== null && 143 readresults !== undefined && 144 readresults length > 0 && ( 145 \<list 146 datasource={readresults} 147 renderitem={(item parse object) => ( 148 \<list item classname="todo item"> 149 \<p 150 classname={ 151 item get('done') === true 152 ? 'todo text done' 153 'todo text' 154 } 155 > 156 {item get('title')} 157 \</p> 158 \<div classname="flex row"> 159 {/ todo update button /} 160 {item get('done') !== true && ( 161 \<button 162 type="primary" 163 shape="circle" 164 classname="todo button" 165 onclick={() => updatetodo(item id, true)} 166 icon={ 167 \<checkoutlined classname="todo button icon done" /> 168 } 169 >\</button> 170 )} 171 {/ todo delete button /} 172 \<button 173 type="primary" 174 shape="circle" 175 classname="todo button" 176 onclick={() => deletetodo(item id)} 177 icon={ 178 \<closeoutlined classname="todo button icon remove" /> 179 } 180 >\</button> 181 \</div> 182 \</list item> 183 )} 184 /> 185 )} 186 \</div> 187 \</div> 188 \</div> 189 ); 190 }; also, add these css styles at the end of your app css app css file 1 / / 2 / your other styles / 3 4 / back4app guide styles / 5 6 html { 7 box sizing border box; 8 outline none; 9 overflow auto; 10 } 11 12 , 13 before, 14 after { 15 margin 0; 16 padding 0; 17 box sizing inherit; 18 } 19 20 h1, 21 h2, 22 h3, 23 h4, 24 h5, 25 h6 { 26 margin 0; 27 } 28 29 p { 30 margin 0; 31 } 32 33 body { 34 margin 0; 35 background color #fff; 36 } 37 38 container { 39 width 100%; 40 max width 600px; 41 margin auto; 42 padding 20px 0; 43 } 44 45 wrapper { 46 width '90%'; 47 align self 'center'; 48 } 49 50 header { 51 align items center; 52 padding 25px 0; 53 background color #208aec; 54 } 55 56 header logo { 57 height 55px; 58 margin bottom 20px; 59 object fit contain; 60 } 61 62 header text bold { 63 margin bottom 3px; 64 color rgba(255, 255, 255, 0 9); 65 font size 16px; 66 font weight bold; 67 } 68 69 header text { 70 color rgba(255, 255, 255, 0 9); 71 font size 15px; 72 } 73 74 flex row { 75 display flex; 76 } 77 78 flex between { 79 display flex; 80 align items center; 81 justify content space between; 82 } 83 84 list heading { 85 font weight bold; 86 } 87 88 new todo wrapper { 89 margin top 20px; 90 margin bottom 10px; 91 } 92 93 new todo wrapper > input { 94 margin right 20px; 95 } 96 97 todo item { 98 border bottom width 1; 99 border bottom color 'rgba(0, 0, 0, 0 12)'; 100 } 101 102 todo text { 103 font size 15px; 104 } 105 106 todo text done { 107 color rgba(0, 0, 0, 0 3); 108 font size 15px; 109 text decoration line line through; 110 } 111 112 todo button { 113 width 32px; 114 height 32px; 115 margin left 5px; 116 background color transparent; 117 border radius 50px; 118 border none; 119 cursor pointer; 120 } 121 122 todo button\ hover, 123 todo button\ focus { 124 background color rgba(0, 0, 0, 0 1); 125 } 126 127 todo button icon done { 128 color #52c41a; 129 font size 16px; 130 } 131 132 todo button icon remove { 133 color #f5222d; 134 font size 16px; 135 } if your component is properly set up, you should see something like this after running the app go ahead and add some to dos by typing its titles in the input box one at a time and pressing on the add add button note that after every successful creation, the createtodo createtodo function triggers the readtodos readtodos one, refreshing your task list automatically you should now have a sizeable to do list like this you can now mark your tasks as done by clicking in the checkmark beside it, causing their done done value to be updated to true and changing its icon status on the left the only remaining data operation is now the delete one, which can be done by pressing on the trash can icon at the far right of your to do list object after successfully deleting an object, you should get an alert message like this conclusion at the end of this guide, you learned how to perform basic data operations (crud) in parse on react in the next guide, we will show you which data types are supported in parse and how to use them