I’m having problems with clicking my form inputs… I can only click the first one ate the top, the rest… it like they are disabled or something (But the second one is clickable if I decrease the width of my browser which is really weird)… this is my code.
import {useState} from 'react';
const Modal = ({open, close, submitForm}) => {
const [task, setTask] = useState('');
const [cat, setCat] = useState('');
const [deadline, setDeadline] = useState('');
const handleSub = (e) => {
e.preventDefault();
submitForm({'task': task, 'cat': cat, 'ddln': deadline});
setTask('');
setCat('');
setDeadline('');
}
if(!open){
return (
<div className="myOverlay">
<div className="myModal">
<strong onClick={close}>X</strong><br />
<form method="post" onSubmit={handleSub} >
<div className="form-group">
<label htmlFor="exampleInputEmail1">Task</label>
<input type="text" className="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter task" name="task" value={task} onChange={(e) =>setTask(e.target.value)}/>
</div><br />
<div className="form-group">
<select className="form-control" defaultValue={cat} id="inlineFormCustomSelectPref" name="cat" onChange={(e) =>setCat(e.target.value)}>
<option>Task category</option>
<option value="Tech">Tech</option>
<option value="Marketing">Marketing</option>
<option value="Financial">Financial</option>
<option value="Admin">Admin</option>
</select>
</div>
<br />
<div className="form-group">
<label htmlFor="exampleInputPassword1">Deadline</label>
<input type="date" className="form-control" id="exampleInputPassword1" placeholder="Deadline" name="ddln" value={deadline} onChange={(e) =>setDeadline(e.target.value)}/>
</div>
<div className="form-check">
<input type="checkbox" className="form-check-input" id="exampleCheck1" />
<label className="form-check-label" htmlFor="exampleCheck1">Make Task Active</label>
</div> <br />
<input type="submit" className="btn btn-dark" value="Submit"/>
</form>
</div>
</div>
);
}
}
export default Modal
That is my form controller and it is a modal.
import { Outlet } from 'react-router-dom';
import { useState } from 'react';
import Sidebar from './Sidebar';
import Modal from './Modal';
import { toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
const Root = () => {
const [ modal, setModal ] = useState(true);
const [ page, setPage ] = useState('home');
const addFormHandle = async (formData) => {
const res = await fetch('http://127.0.0.1:8000/api/tasks/add', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(formData),
})
if (res.ok) {
//throw new Error('Network response was not ok');
toast.success('Task added successfully', {
position: "top-right",
autoClose: 5000,
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
theme: "dark",
});
}
else
{
toast.error('Task failed to add please check network connection!!!', {
position: "top-right",
autoClose: 5000,
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
theme: "dark",
});
}
setModal(true);
//console.log(formData);
}
return(
<div className='row'>
<div className="col-md-2">
<Sidebar page={setPage} />
</div>
<div className="col-md-10">
<main className="main-sec container">
<Outlet />
</main>
<Modal open={modal} close={()=>setModal(true)} submitForm={addFormHandle} />
</div>
<div className="myContainer">
<button className="btn btn-dark fixed-button" onClick={()=>setModal(false)}>Add Task</button>
</div>
</div>
)
}
export default Root;
This is my root controller… I used react-toastify on it (the problem kind of started the same time I added it… but was kind of on and off until it was just on… it was weird I event thought my pc was crashing so I restarted it but the problem remained).
import { createBrowserRouter, createRoutesFromElements, Route, Outlet, RouterProvider} from 'react-router-dom';
import { useState } from 'react';
import Sidebar from './Components/Sidebar';
import Cards from './Components/Main/Cards';
import Table from './Components/Main/Table';
import Modal from './Components/Modal';
import Deadlines from './Components/Deadlines';
import Home from './Components/Home';
import Tasks from './Components/Tasks';
import Inoives from './Components/Inoives';
import Root from './Components/Root';
import DataLoada from './DataLoada.js';
import { ToastContainer } from 'react-toastify';
function App() {
const router = createBrowserRouter(
createRoutesFromElements(
<Route path="/" element={<Root />}>
<Route index element={<Home />} />
<Route path="/deadlines" element={<Deadlines />} />
<Route path="/tasks" element={<Tasks />} loader={DataLoada} />
<Route path="/invoices" element={<Inoives />} />
</Route>
)
)
return (
<>
<RouterProvider router={router} />
<ToastContainer />
</>
);
}
export default App;
This is my App.js file… I added the toast container here.
I tried looking at the backend. I thought maybe the problem was it… I don’t think it was.