CODEWITHSUNDEEP
javascriptreactjs
OMGItsRob
OMGItsRob

Reputation: 125

How do I get value of an element after clicking another?

In React, how can I get the value of another element by clicking/changing a different one?

<div>
    <input {get this value}/>
    <button onClick={()=> console.log(get value of above input field)}/>
</div>

Upvotes: 1

Views: 760

Answers (2)

DecPK
DecPK

Reputation: 25408

1) Controlled input using useState hook

Codesandbox Demo

  const [inputValue, setInputValue] = useState("");

  function onInputChange(e) {
    setInputValue(e.target.value);
  }

  const getValue = () => console.log(inputValue);

  return (
    <div>
      <input value={inputValue} onChange={onInputChange} />
      <button onClick={getValue}>get value</button>
    </div>
  );

2) Uncontrollect input using useRef hook

Codesandbox Demo

  const inputRef = useRef("");

  const getValue = () => console.log(inputRef.current.value);

  return (
    <div>
      <input ref={inputRef} />
      <button onClick={getValue}>get value</button>
    </div>
  );

Upvotes: 0

Abheeth Kotelawala
Abheeth Kotelawala

Reputation: 142

You can use document.getElementById().value

export default function App() {
  function getText() {
    var myInputText = document.getElementById('myInput').value;
    console.log('Input text:', myInputText);
  }
  return (
    <div>
      <input id="myInput" />
      <button onClick={() => getText()}>Get Text</button>
    </div>
  );
}

Or You can use Forms and useState Hook

export default function App() {
  const [name, setText] = useState('');

  const handleSubmit = (evt) => {
    evt.preventDefault();
    console.log(`Input text: ${name}`);
  };
  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={name}
        onChange={(e) => setText(e.target.value)}
      />
      <input type="submit" value="Submit" />
    </form>
  );
}

Upvotes: 1

Related Questions