- step-1. Create a form tag and create the necessary input tags & submit button
- step-2. Give a name attribute inside the input tags as attribute, for example:- ,
- step-3. Create an event handler, const handleSubmit = e =>{ console.log("form submitted") }
- step-4. Call the function inside the form tag using onSubmit hook, <form onSubmit={()=>handleSubmit()}>
- step-5. stop the default behavior, when we submit the form it will reload the whole page. So, we need to prevent it by using event.preventDefault(). Event parameter holds the whole information of form. So, we can access anything from the form by event parameter.
- step-6. const handleSubmit = e =>{ e.preventDefault(); const form = e.target; const name = form.name.value // remember the name should have to be same as the input name value. console.log(name) }
-
const nameRef = useRef();
const handleSubmit = e =>{ e.preventDefault(); console.log(nameRef.current.value) }
return (
- create custom hook, import { useState } from "react"
const useInputValue = (d=null) =>{ const [value, setValue] = useState(d) const handleChange = e =>{ setValue(e.target.value); } return [value, handleChange] }
export default useInputValue
- use it in other components const [name, handleNameChange] = useInputValue("Hello world!") // you can use any name you want instead of value & handleChange
- By context api & useContext hook we can access data in any component that is under the provider of that context. That means, children components of the context api will be able to access it's data by calling it without any props drilling.