I’ve a simple Next.js app on Netlify that open a form to click on the subscribe button. Code Here is the index file: pages/index.js Here is the modal: components/SubscribeModal.js I also have a simple pages/success.js app with a success message. Problem When I click on the submit button, a 404 page appear. Tried solution I’ve tried every tag in the
Tag: material-ui
Mui-Datatable onTableChange is not working when adding a setState
I am using mui-datatable and based on the official example of this codesandbox, you can setState on the tableState. https://codesandbox.io/s/trusting-jackson-k6t7ot?file=/examples/on-table-init/index.js I wanted to get the the tableState.displayData hence, I added this, however, this will result to an error that says: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the
Best method to keep track of a users progression through reading sections of text
Similar to zyBooks if you are familiar with it, I want to track the sections the user has read through and checked completed with a button. However, conceptually I am having trouble thinking of what to store in my mongo database, besides just an object or an array of objects that contains each section and bool values, to track their
Proper way to perform an API call inside div?
So I am currently trying to display data in a table. This data is from 2 separate tables in the database with foreign keys. I get my list using this call: So I can get the list of Stores and can display them in the table with no issue using this code: Now I want to run this API inside
The number is not clearing up after submission even if other fields do clear up
I have these fields that I want to clear up after submission. The other fields that were stated here do clear up except for the number. Why is this happening and how do I fix this? Any help would be appreciated. Thank you. Textfield number: Clearing up the states: Submission: Update: I tried setting up setNumber() and it still won’t
On login screen layout keeps showing – React & React router
As I mentioned I have MUI Theme Provider with Layout which includes Dashboard, Order screens … When user hits ‘/’ endpoint it should return Login Screen but Layout keeps showing itself. -App.js ); -Layout.js …AppBar,Sidebar etc Answer As-is, the code is unconditionally rendering a Layout component outside the Switch, so it’s rendered regardless of the currently matched route. If you
How can I make a reusable component for Material-UI Snackbar?
I have this Alert component to be used just to have a message that says “Successfully submitted” and I’m trying to use thin in a parent component. However, nothing shows in the parent component. AlertComponent Parent Component How can I fix this? Thank you. Answer Although @Ghader Salehi commented already the solution but if anyone is not sure how to
Material UI All components in the same line, taking full width
I have these components here: Sandbox: https://codesandbox.io/s/6ipdf?file=/demo.js:78-129 I want the first input(the text input) to take all the remaining space on the page, how do I do that? Answer You can wrap the form control components using Box instead of the current div. If you think the select components have the large width, then you can set the custom width.
Moment.js formatting date field to a day earlier than it should
This is a very small little bug I’m trying to fix in my code. I have a React component with this initial state Which is used in a form like so: I’ve done console.logs to see that the Moment(new Date()).format(‘YYYY-MM-DD’) shows today’s date, as I want, but for some reason when the component renders it has the default date in
How do I make a reusable component for the Cards and how can I use the new makeStyles of material-ui?
In the demo.js, I wanted to use the Card along with its CardHeader and put wordings inside the CardContent. Also, I will be using the CardComponent in other files as well. How can I make the CardComponent reusable? Sample codes: https://codesandbox.io/s/basiccard-material-demo-forked-kkshx?file=/demo.js Below are the codes for the demo.js: Below are the codes for the CardComponent: I have another question as