rmodal.js | A simple 1.2 KB modal dialog with no dependencies | Frontend Utils library

I'm building an app with React and I'm trying to implement a modal appearing after error occurring.

This is a simply login card with input boxes and I do a post request to login or sign-up new users. If there's any error in my form or users already exists I want to popup a modal with error messages like the following.

I can't understand why it isn't showing. The error is ok and the backdrop is visible. Any help is appreciated. There's my code:

This is the JSX code:

So I have a functional component which is a toolbar. Its parent is a Text editor. The toolbar has many child components which are buttons. On clicking one of these buttons, I want a modal to appear. The logic of useModal. But the FormatToolbarModal does not appear.

I have read that all the rendering of a component must be done by the top level custom component? But I am unsure where to go from there. I want this modal to be reusable as other options from the toolbar will use it.

index.jsx

I have created a user CRUD api that is linked to a reactJs front end. I have been using the bootstrap components and decied to use the modal component to have edit forms. The only issue is that for some reason when the modal opens, I can not exit it again unless I reload the browser.

The code for the EditUserModal.js is as follows:

I've developed a basic API using asp.net MVC that works as a basic User CRUD. (Create,Read, Update & Delete)

I have started to create a front end using ReactJS that has a Add user modal form, edit user modal and delete function.

The GET, POST and DELETE features all work, the only issue comes from the PUT. When I click on the Edit user modal, only the Id shows.

The code for the editUserModal.js is as follows:

I am trying to write tests for my application using Jest, but I am facing the same issue for every functional component that uses React Hooks.

This is my package.json file, but I can't see what might be wrong with it.

I have a page named List.js, and a component file for List.js named vansFilterModal.js, Values were coming from NavigationSerice in List.js, but the code was too big so i created a component and moved Modal code from List.js to vansFilterModal.js and imported it in List.js, But now It's not getting the values, It's sending me this error:

I am just beginning in MERN Stack and am currently trying to POST data from a form located in RegisterModal.js to server.js

The index.html file gets its content from index.js which renders App.js and depending on the button clicked different components are rendered. (This is what I understand)

One of them being RegisterModal.js, I am trying to post data from this form to server.js

The code for both files are located below and my project structure is as follows. (The rest of the code is located on github http://github.com/yenvanio/testapp)

The error I am getting is "Cannot post to /register" and the console gives me a error of not found.

I have the following code:

adminMainPage.jsp

I'm building Multiple Select component for user to select the seasons on the post. So use can choose Spring and Fall. Here I'm using reselect to track selected objects.

My problem is that my reselect doesn't trigger one it renders at the first time. This question looks pretty long but it has many console.log() lines for clarification. So please bear with me! :)

('main.js') Here is my modal Component. Data for this.state.items is seasons = [{id: '100', value: 'All',}, { id: '101', value: 'Spring',}, { ... }]