spread operator ES6 - Practice
Tue Jun 27 2023 22:39:14 GMT+0000 (Coordinated Universal Time)
Saved by
@sarfraz_sheth
#react.js
-------------- Form Page --------------------
import React, { useState } from "react";
import FormInput from "./FormInputs";
function Form(params) {
function getfullname(event) {
const { name, value } = event.target; // DESTRUCTURING CONCEPT
params.setFullName((prevName) => {
return {
...prevName,
[name]: value
};
});
//params.setFullname(event.target.value);
}
return (
<form className="form">
<FormInput
type="text"
name="fname"
placeholder="Username"
onchange={getfullname}
/>
<FormInput
type="text"
name="lname"
placeholder="Lastname"
onchange={getfullname}
/>
</form>
);
}
export default Form;
--------------------- App Page -----------------------
import React, { useState } from "react";
import Form from "./Form";
function App() {
//setInterval(getTime,1000);
const [fullName, setFullName] = useState({
fname: "f",
lname: "n"
});
return (
<div className="container">
{isLoggedIn === true ? (
<h1>Hola {fullName.fname + " " + fullName.lname}</h1>
) : (
<div>
<h1>Hola {fullName.fname + " " + fullName.lname}</h1>
<Form setFullName={setFullName} />
</div>
)}
<h1 className="timer">{time}</h1>
<button className="timer" onClick={getTime}>
Get Time
</button>
</div>
);
}
export default App;
content_copyCOPY
practica de como en el arreglo de formulario se acrega primero el objeto de los datos anteriories y luego se accede al valor del destructuring name para asignarle el valor nuevo de lo que se escribe
Comments