maximo uso event, components and use state
Thu Jun 22 2023 13:02:09 GMT+0000 (Coordinated Universal Time)
Saved by
@sarfraz_sheth
#react.js
-------------- APP Page ----------------------
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 [heading, setHeading] = useState("Hola mundo heading");
return (
<div className="container">
{isLoggedIn === true ? (
<h1>{heading}</h1>
) : (
<div>
<h1>{heading}</h1>
<Form heading={heading} setHeading={setHeading}/>
</div>
)}
<h1 className="timer">{time}</h1>
<button className="timer" onClick={getTime}>
Get Time
</button>
</div>
);
}
export default App;
----------------- Form Page --------------------------
import React, { useState } from "react";
import FormInput from "./FormInputs";
function Form(params) {
const [name, setName] = useState(params.heading);
console.log(params.heading);
console.log(name);
const [conditionButton, setCondition] = useState(false);
function getStateOver() {
setCondition(true);
}
function getStateOut() {
setCondition(false);
}
function getHeading(event) {
setName(event.target.value);
params.setHeading(event.target.value);
}
return (
<form className="form">
<FormInput type="text" placeholder="Username" onchange={getHeading} />
<FormInput type="password" placeholder="Password" />
<button
type="submit"
style={
conditionButton ? { background: "black" } : { background: "white" }
}
onMouseOver={getStateOver}
onMouseOut={getStateOut}
onClick={getHeading}
>
Login
</button>
</form>
);
}
export default Form;
-------------------------- Input Page -------------------------------
import React, { useState } from "react";
function FormInput(params) {
const [name, setName] = useState("Input Value");
// function onChangeEvent(event) {
//console.log(element.target.value);
// console.log(event.target.placeholder);
// console.log(event.target.type);
// setName(event.target.value);
//}
return (
<div>
<input
type={params.type}
placeholder={params.placeholder}
onChange={params.onchange}
/>
{name}
</div>
);
}
export default FormInput;
content_copyCOPY
se juntan todos los conseptos de usestate componentes y demas
Comments