complex setstate and events
Tue Jun 27 2023 21:29:27 GMT+0000 (Coordinated Universal Time)
Saved by
@sarfraz_sheth
#react.js
----------------- app pages ---------------------------
import React, { useState } from "react";
import Form from "./Form";
var isLoggedIn = false;
const NEWDATE = new Date();
const nowDate = NEWDATE.toLocaleTimeString();
function App() {
//setInterval(getTime,1000);
const [time, nextTime] = useState(nowDate);
function getTime() {
console.log("clicked");
console.log(new Date().toLocaleTimeString());
return nextTime(new Date().toLocaleTimeString());
}
const [fname, setfname] = useState(" ");
const [lname, setlname] = useState(" ");
return (
<div className="container">
{isLoggedIn === true ? (
<h1>Hola {fname + " " + lname}</h1>
) : (
<div>
<h1>Hola {fname + " " + lname}</h1>
<Form fname={setfname} lname={setlname} />
</div>
)}
<h1 className="timer">{time}</h1>
<button className="timer" onClick={getTime}>
Get Time
</button>
</div>
);
}
export default App;
import React, { useState } from "react";
import FormInput from "./FormInputs";
function Form(params) {
const [conditionButton, setCondition] = useState(false);
function getStateOver() {
setCondition(true);
}
function getStateOut() {
setCondition(false);
}
function getfname(event) {
params.fname(event.target.value);
}
function getlname(event) {
params.lname(event.target.value);
}
return (
<form className="form">
<FormInput type="text" placeholder="Username" onchange={getfname} />
<FormInput type="text" placeholder="Lastname" onchange={getlname} />
<FormInput type="password" placeholder="Password" />
<button
type="submit"
style={
conditionButton ? { background: "black" } : { background: "white" }
}
onMouseOver={getStateOver}
onMouseOut={getStateOut}
onClick={getfname}
>
Login
</button>
</form>
);
}
export default Form;
----------------- form pages ---------------------------
content_copyCOPY
Comments