My code : NameInput.js
import React from "react";
const NameInput = (props) => {
return (
<>
<input
type={"text"}
placeholder="N a m e"
id="name-input"
className="form-input"
onChange={(e)=>props.passState.setFormValue(e)}
value={props.passState.formValue.name}
/>
<div id="border-name" className="border-div" />
</>
);
};
export default NameInput;
ConfirmPassword.js
import React from "react";
// import { onFormChange } from "../utils/utilFunction";
const ConfirmPassword = (props) => {
return (
<>
<input
type={"password"}
placeholder="C o n f i r m P a s s w o r d"
id="confirm-password-input"
className="form-input"
onChange={(e)=>props.passState.setFormValue(e)}
value={props.passState.formValue.cnfmPswd}
/>
<div id="border-confirm-password" className="border-div" />
</>
);
};
export default ConfirmPassword;
warning in console
react-dom.development.js:86 Warning: A component is changing a controlled input to be uncontrolled. This is likely caused by the value changing from a defined to undefined, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://reactjs.org/link/controlled-components
at input
at NameInput (http://localhost:3000/static/js/bundle.js:826:20)
at div
at form
at Form (http://localhost:3000/static/js/bundle.js:249:5)
at div
at div
at div
at Mainbox (http://localhost:3000/static/js/bundle.js:122:5)
at App (http://localhost:3000/static/js/bundle.js:35:76)
Main code Form.js
import LoginAccount from "./renderIfSignup/LoginAccount";
import CreateAccount from "./renderIfLogin/CreateAccount";
const Form = ({ sendprop }) => {
const [formValue, setFormValue] = useState({
name: "",
email: "",
pswd: "",
cnfmPswd: "",
});
function onFormChange(e) {
console.log("target : "+e.target.value);
setFormValue({ ...formValue, [e.target.name]: e.target.value });
console.log(formValue);
}
return (
<>
<form>
<div id="input-div">
{sendprop === "signup" ? <NameInput passState={{formValue,setFormValue}}/> : " "}
<input
type={"email"}
placeholder="E m a i l A d d r e s s"
id="email-input"
className="form-input"
name="email"
onChange={onFormChange}
value={formValue.email}
/>
<div id="border" className="border-div" />
<input
type={"password"}
placeholder="P a s s w o r d"
id="password-input"
className="form-input"
onChange={onFormChange}
value={formValue.pswd}
/>
<div id="border" className="border-div" />
{sendprop === "signup" ? <ConfirmPassword passState={{formValue,setFormValue}}/> : " "}
</div>
<div id="submit-btn-div">
<button type={"submit"} id="submit-btn">
S U B M I T
</button>
</div>
{sendprop === "signup" ? <LoginAccount /> : " "}
{sendprop !== "signup" ? <CreateAccount /> : " "}
</form>
</>
);
};
export default Form;
I am getting warning in those two component that is NameInput.js and ConfirmPassword.js but not in input bar of Form.js What is controlled Input and uncontrolled input ? what Am I doing wrong? Can anyone explain why I am facing this error
Your code has a lot of mistakes!
e.target.name but you don't have the name attribute in your input tag.onFormChange not the state setter setFormValue).// NameInput.js
const NameInput = (props) => {
return (
<>
<input
type={"text"}
placeholder="N a m e"
id="name-input"
className="form-input"
name="name" // Missing name attribute here
onChange={(e) => props.passState.onFormChange(e)}
value={props.passState.formValue.name}
/>
<div id="border-name" className="border-div" />
</>
);
};
// ConfirmPassword.js
const ConfirmPassword = (props) => {
return (
<>
<input
type={"password"}
placeholder="C o n f i r m P a s s w o r d"
id="confirm-password-input"
className="form-input"
name="cnfmPswd" // Missing name attribute here
onChange={(e) => props.passState.onFormChange(e)}
value={props.passState.formValue.cnfmPswd}
/>
<div id="border-confirm-password" className="border-div" />
</>
);
};
// Form.js
const Form = ({ sendprop }) => {
const [formValue, setFormValue] = useState({
name: "",
email: "",
pswd: "",
cnfmPswd: ""
});
function onFormChange(e) {
console.log("target : " + e.target.value);
setFormValue((prev) => ({ ...prev, [e.target.name]: e.target.value })); // setState with previous value
console.log(formValue);
}
return (
<>
<form>
<div id="input-div">
{sendprop === "signup" ? (
<NameInput passState={{ formValue, onFormChange }} /> // Pass wrong handler function
) : (
" "
)}
<input
type={"email"}
placeholder="E m a i l A d d r e s s"
id="email-input"
className="form-input"
name="email"
onChange={onFormChange}
value={formValue.email}
/>
<div id="border" className="border-div" />
<input
type={"password"}
placeholder="P a s s w o r d"
id="password-input"
className="form-input"
onChange={onFormChange}
value={formValue.pswd}
name="pswd" // Missing name attribute here
/>
<div id="border" className="border-div" />
{sendprop === "signup" ? (
<ConfirmPassword passState={{ formValue, onFormChange }} /> // Pass wrong handler function
) : (
" "
)}
</div>
<div id="submit-btn-div">
<button type={"submit"} id="submit-btn">
S U B M I T
</button>
</div>
{sendprop === "signup" ? <LoginAccount /> : " "}
{sendprop !== "signup" ? <CreateAccount /> : " "}
</form>
</>
);
};
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments