CRUD Operation in React Native

Here, we learn how to do CRUD Operation in React Native.

First, we need to create a new React Native app. Here,  ‘MyReactNative’ is the application name.

create-react-native-app MyReactNative

The app is created then use the below command and run the app.

cd MyReactNative
npm start

if run this app on the web press ‘w’

For designing this app we use the react-native-paper plugin and link with react native.

npm i react-native-paper
react-native link react-native-paper

For using this plugin element we need to wrap our app with <PaperProvider>.

Here, we use API for CRUD operation.

Now, get all data and list them

const [apiData, setApiData] = useState([]) 
const getAllData = () => {
  axios.get("http://localhost:4000/api/student/get-all")
    .then((res) => setApiData(res.data.data))
    .catch(error => console.log('error', error));
}
useEffect(() => {
  getAllData()
}, [])

<DataTable>
  <DataTable.Header>
    <DataTable.Title>First Name</DataTable.Title>
    <DataTable.Title>Last Name</DataTable.Title>
    <DataTable.Title>Email</DataTable.Title>
    <DataTable.Title>Age</DataTable.Title>
    <DataTable.Title>City</DataTable.Title>
    <DataTable.Title>Phone Number</DataTable.Title>
    <DataTable.Title>Action</DataTable.Title>
  </DataTable.Header>
  {apiData.map((e, i) => {
    return (
      <DataTable.Row key={i}>
        <DataTable.Cell>{e.firstName}</DataTable.Cell>
        <DataTable.Cell>{e.lastName}</DataTable.Cell>
        <DataTable.Cell>{e.email}</DataTable.Cell>
        <DataTable.Cell>{e.age}</DataTable.Cell>
        <DataTable.Cell>{e.city}</DataTable.Cell>
        <DataTable.Cell>{e.phoneNumber}</DataTable.Cell>
        <DataTable.Cell>
           <Button mode='outlined' icon="delete" onPress={() => deleteData(e._id)}> Delete </Button>
           <Button mode='outlined' icon="pen" style={{ marginLeft: '1px' }} onPress={() => editData(e._id)}> Edit </Button>
        </DataTable.Cell>
      </DataTable.Row>
    )
  })}
</DataTable>

Then, we create a form to add and update the data and give their input fields onChange event.

const [dataObject, setDataObject] = useState({ firstName: '', lastName: '', age: '', email: '', password: '', city: '', phoneNumber: '' })

const changefirstName = (e) => { setDataObject({ ...dataObject, firstName: e }) }
const changelastName = (e) => { setDataObject({ ...dataObject, lastName: e }) }
const changeage = (e) => { setDataObject({ ...dataObject, age: e }) }
const changeemail = (e) => { setDataObject({ ...dataObject, email: e }) }
const changepassword = (e) => { setDataObject({ ...dataObject, password: e }) }
const changecity = (e) => { setDataObject({ ...dataObject, city: e }) }
const changephoneNumber = (e) => { setDataObject({ ...dataObject, phoneNumber: e }) }

<View >
  <TextInput mode="outlined" label="First Name" onChangeText={(e) => changefirstName(e)} value={dataObject.firstName} />
  <TextInput mode="outlined" label="Last Name" onChangeText={(e) => changelastName(e)} value={dataObject.lastName} />
  <TextInput mode="outlined" label="Age" onChangeText={(e) => changeage(e)} value={dataObject.age} />
  <TextInput mode="outlined" label="Email" onChangeText={(e) => changeemail(e)} value={dataObject.email} />
  <TextInput mode="outlined" label="Password" secureTextEntry right={<TextInput.Icon name="eye" />} onChangeText={(e) => changepassword(e)} value={dataObject.password} />
  <TextInput mode="outlined" label="City" onChangeText={(e) => changecity(e)} value={dataObject.city} />
  <TextInput mode="outlined" label="Phone Number" onChangeText={(e) => changephoneNumber(e)} value={dataObject.phoneNumber} />
  <Button type='submit' onPress={submitData}> Submit </Button>
</View>

Now,  add the data on the form submitted.

const submitData = () => {
  axios.post("http://localhost:4000/api/student/add", dataObject)
    .then((res) => {
      if (res.data.isSuccess) {
        getAllData()    //for show all data in dashboard call get all api
      }
    })
    .catch(error => console.log('error', error));
}

Then, delete data on the button click event.

const deleteData = (id) => {
  axios.delete(`http://localhost:4000/api/student/delete?id=${id}`)
    .then((res) => {
      getAllData()      // show all data after delete data call get-all api
    })
    .catch(error => console.log('error', error));
}

then, edit data,

we fill form value for edit data on the button click event and then after changing data on form submit event call update API.

const editId = 0 

const editData = (id) => {
  editId = id
  axios.get(`http://localhost:4000/api/student/get-by-id?id=${id}`)
    .then((res) => {
      setDataObject({ ...res.data.data, id });         // set data on form
    })
    .catch(error => console.log('error', error));
}

const submitData = () => {
  axios.post("http://localhost:4000/api/student/update", dataObject)
    .then((res) => {
      if (res.data.isSuccess) {
        editId = 0
        getAllData()           // after changing show all data in dashboard
      }
    })
    .catch(error => console.log('error', error));
}

Here, we use editId to add and update data.

const submitData = () => {
  if (editId) {
      //  update data API call
  }
  else {
      //  add data API call
  }
}

Output -:-