Jayganesh Gupta jaySmilet

🎯

Focusing

MEAN/MERN Stack Developer

jaySmilet / reusable-controlled-uncontrolled.jsx

Created October 10, 2025 02:44

Reusable components with controlled and uncontrolled

	function CustomInput({ value, onChange, defaultValue }) {
	const inputRef = useRef();
	return (
	<input
	value={value}
	onChange={onChange}
	ref={inputRef}
	defaultValue={defaultValue}
	/>
	);

jaySmilet / migrate-uncontrolled-to-controlled.jsx

Created October 10, 2025 02:40

Migration uncontrolled components to controlled components

	const [val, setVal] = useState("");
	return (
	<input value={val} onChange={e => setVal(e.target.value)} />
	);

jaySmilet / value.html

Created October 10, 2025 02:35

Input value

jaySmilet / defaultValue.html

Created October 10, 2025 02:33

Input default value

jaySmilet / useRef.jsx

Created October 10, 2025 02:30

React uncontrolled components useRef

	const inputRef = useRef();
	<input ref={inputRef} />

jaySmilet / form-validation-uncontrolled.jsx

Created October 9, 2025 19:07

Form Validation uncontrolled components

	function handleSubmit() {
	if (inputRef.current.value.includes("@")) {
	// Valid email
	} else {
	// Invalid
	}
	}

jaySmilet / form-validation-controlled.jsx

Created October 9, 2025 19:04

Form Validation controlled component

	<input
	value={email}
	onChange={e => setEmail(e.target.value)}
	required
	/>

jaySmilet / uncontrolled-component.jsx

Created October 9, 2025 18:49

React uncontrolled components

	import React, { useRef } from "react";
	function EmailInput() {
	const inputRef = useRef();
	function handleSubmit() {
	alert(inputRef.current.value);
	}
	return (
	<>
	<input ref={inputRef} />
	<button onClick={handleSubmit}>Submit</button>

jaySmilet / controlled-component.jsx

Created October 9, 2025 18:46

React controlled component

	import React, { useState } from "react";
	function NameInput() {
	const [name, setName] = useState("");
	return (
	<input value={name} onChange={e => setName(e.target.value)} />
	);
	}

jaySmilet / call-apply-bind-alternative.js

Created October 8, 2025 17:58

Call Apply Bind Alternative

	// Using spread instead of apply
	let args = [1, 2, 3];
	someFunc(...args); // No need for apply!

	// Arrow functions for keeping 'this'
	const buttons = document.querySelectorAll('.btn');
	buttons.forEach(btn => btn.addEventListener('click', () => handleClick()));