How do I not allow submission for empty fields from a child component? More explanation below

I have this sample codesandbox I made, though, in my original one there were already a lot of values. I only recreated the problem that I had. Codesandbox: https://codesandbox.io/s/youthful-firefly-40mig3?file=/src/App.js I have this in my App.js where I define some of my needed values and then pass it to 2 other components. <div className="App"> {/* some… Read More How do I not allow submission for empty fields from a child component? More explanation below

TypeError issue when converting a class component to a functional component

Continuing on from a previous SO thread involving the conversions from a class component to a functional component, I am now having issues with both the reset and clear button operations and unsure how to fix. When clicking on both these buttons, I am getting the error: TypeError Cannot read properties of undefined (reading ‘settings’)… Read More TypeError issue when converting a class component to a functional component

Exception could not catch from calllbacked function

I am calling a login function using firebase authentication and checking the custom user claim. If not, then throw the exception. I could not catch the exception in caller function. May I know why? const handleLogin = async (data) => { console.log(data); setIsSubmitting(true); auth .login(data.email, data.password) .then((res) => { navigate(from, { replace: true }); })… Read More Exception could not catch from calllbacked function

Simple react component does not render

I’ve been trying to figure out why my components will not display at all for the past 5 hours. Any help is greatly appreciated. Here is the source: index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://unpkg.com/react@18/umd/react.production.min.js&quot; crossorigin></script> <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js&quot; crossorigin></script> <script src="modules/Container.js"></script> <script src="modules/CategoryFolder.js"></script> <script src="https://code.jquery.com/jquery-3.6.0.min.js"&hellip; Read More Simple react component does not render

How to add items to array in react

Code: export default function App() { const [name,setName] = useState(""); var myArray = []; const handleAdd = () => { myArray = […myArray,name] setName("") } return ( <div className="App"> <input placeholder="type a name" onChange={(e) => setName(e.target.value)}/> <button onClick={handleAdd}>add</button> <button onClick={() => console.log(myArray)}>test</button> {myArray.map((n) => { return <h2>{n}</h2> })} </div> ); } OnClick it isn’t adding… Read More How to add items to array in react

Npm Start Returning index.html instead of React Rendered Page

I’m new to react but something is not working on the backend. When I run npm start it servers up the blank index.html page instead of rendering from index.js Everything works fine in code sandbox, but I can’t run it locally. Here is my index.js file ReactDOM.Render( <HashRouter> <Routes> <Route path="/" element={<App />} /> <Route… Read More Npm Start Returning index.html instead of React Rendered Page