how to get user input in a form using useRef

isuro answered on July 16, 2022 Popularity 7/10 Helpfulness 6/10

answer how to get user input in a form using useRef

how to get user input in a form using useRef

Comment

import React, { useRef } from "react";

const TaskFrom = (props) => {
  const taskInputRef = useRef("");

  const submitHnadler = (e) => {
    e.preventDefault();

    const enteredValue = taskInputRef.current.value; //by using .current.value we are getting the current Input given by the user and we are incorporating the chnages in input or in new input by useRef.

    console,log(enteredValue);//user input
  };

  return (
    <form onSubmit={submitHnadler}>
      <label htmlFor="taskInputField">Enter Your Task:</label>
      <input type="text" id="taskInputField" ref={taskInputRef} />
      {/* using ref on input we are letting know that which input we are trying to get */}
      <button>Send Task</button>
      <p>{enteredValue}</p>
    </form>
  );
};

export default TaskFrom;

Popularity 7/10 Helpfulness 6/10 Language javascript

Source: Grepper

Tags: get javascript use-ref user-input using

Link to this answer
Share Copy Link

Contributed on Jul 16 2022

isuro

0 Answers Avg Quality 2/10

Continue with Google

By continuing, I agree that I have read and agree to Greppers's Terms of Service and Privacy Policy.

how to get user input in a form using useRef

Contents

More Related Answers

how to get user input in a form using useRef

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.