Tag: reactjs

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

MRLeave a comment

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

MRLeave a comment

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

MRLeave a comment

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

MRLeave a comment

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

MRLeave a comment

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

MRLeave a comment