Building a CRUD App with React and a Headless CMS

1

For many years, web projects have used Content Management Systems (CMS) to create and manage content, store it in a database, and display it using server-side rendered programming languages. WordPress, Drupal, Joomla are well-known applications used for this purpose.

This is a companion discussion topic for the original entry at https://strapi.io/blog/how-to-build-a-crud-app-with-react-and-a-headless-cms
2

I get 2 errors when compiling the frontend. I added an Error Boundry to index.js around the provider. There are less errors but I still get the following 2 errors:

The above error occurred in the component:

Provider@http://localhost:3000/static/js/bundle.js:72471:15
ErrorBoundry@http://localhost:3000/static/js/bundle.js:187:5

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundry.

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

  1. You might have mismatching versions of React and the renderer (such as React DOM)
  2. You might be breaking the Rules of Hooks
  3. You might have more than one copy of React in the same app

Please assist. Thank you.

3
4

I got so many error, this tutorial maybe out of date …

  1. In react-router-dom v6, “Switch” is replaced by routes “Routes”.

You need to update the import from in – src/App.js

import { Route, BrowserRouter as Router, Switch } from "react-router-dom";

to

import { Route, BrowserRouter as Router, Routes } from "react-router-dom";

and

change all <Switch> which available in the file to <Routes>
  1. In react-router-dom v6, “Redirect” is replaced by “Navigate”.

You need to update the import from in src/pets/EditPet.jsx and src/pets/AddItem.jsx

import { Redirect } from "react-router-dom";

to

import { Navigate } from "react-router-dom";

and

change all <Redirect> to <Navigate> in the file

After the repair, i just can see blank page with error at console

Uncaught Error: [undefined] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

etc…

**this is my first tutorial with strapi

5

i solved my issue above by uninstall router-dom version 6

npm uninstall react-router-dom

and installd previous version.

npm install react-router-dom@5.2.0

but page can see list table but no data in the list, also cannot add new data

6

You can find the working code here

1 Like
7

CRUD is an essential approach wherein we can split the UI layer into two reusable piece and bring flexibility in the approach. Integrating Headless CMS with React eases the process and helps in building potential end result. I need a help in terms of Building CRUD App with React Hook- “How useState hook works? What is/are the arguments accepted by this hook and what is returned by the hook?”

8

I couldn’t add, edit or delete following this tutorial nor with the git files. :confused:

when trying to add it returns the error in the console:

xhr.js:210 POST http://localhost:1337/api/pets 400 (Bad Request)
dispatchXhrRequest @ xhr.js:210
xhrAdapter @ xhr.js:15
dispatchRequest @ dispatchRequest.js:58
request @ Axios.js:108
Axios. @ Axios.js:140
wrap @ bind.js:9
createNewPet @ PetContext.js:17
handleCreateNewPet @ CreatePetEntry.js:44
callCallback @ react-dom.development.js:4157
invokeGuardedCallbackDev @ react-dom.development.js:4206
invokeGuardedCallback @ react-dom.development.js:4270
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:4284
executeDispatch @ react-dom.development.js:9011
processDispatchQueueItemsInOrder @ react-dom.development.js:9043
processDispatchQueue @ react-dom.development.js:9056
dispatchEventsForPlugins @ react-dom.development.js:9067
(anonymous) @ react-dom.development.js:9258
batchedUpdates$1 @ react-dom.development.js:25979
batchedUpdates @ react-dom.development.js:3984
dispatchEventForPluginEventSystem @ react-dom.development.js:9257
dispatchEvent @ react-dom.development.js:6435
dispatchDiscreteEvent @ react-dom.development.js:6410
createError.js:16 Uncaught (in promise) Error: Request failed with status code 400
at createError(createError.js:16:1)
at settle (settle.js:17:1)
at XMLHttpRequest.onloadend (xhr.js:66:1)

Has anyone managed to get this CRUD project to work?

9

@commentsBot I followed the tutorial and works fine for me. I did have an issue with the edit not saving but I then copied the code from the Github source and seemed to work fine then. There is a warning that displayed on the EditPetEntry.js file that useEffect was being imported but was not in use for that particular file. I removed the useEffect on line one and received no warning after.

As for your issue, are you sure your running the strapi backdend as well as the front end? Are you able to run a simple API call when the frontend app is running? Pretty sure the errors are due to not reaching the backend (400 errors). If not, try to solve that first. Also - for the purpose of testing CRUD without authentication, make sure your permission settings also publicly allow for create, delete, update, find, findOne.

10

@commentsBot This was such a cool tutorial to fast-forward my Front-end build! I really liked the useContext explanation. Goodbye Redux, hello Context!

If any one runs into CORS issues making calls to a live backend (Mine is running on EC2), I found this was a pretty slick solution: Custom local domain solves CORS and other issues - DEV Community

Thanks!

11

Great to hear @HariSeldon27 Thanks for helping the community with your solution :raised_hands: