ReactJS: accessing a very simple form input value on submit and change

Question

I appreciate this may be basic as I'm new to react, but I'm trying to just very simply log the value of the input whenever it is changed or submitted.

Here is the code:

import React from "react";

const App = () => {
  const onNameChange = (nameInput) => {
    console.log("name change Fn", nameInput);
  };

  return (
    <>
    <form onSubmit={onNameChange(this.value)}>
      <input value='the value' type="text" onChange={console.log(this.value)}></input>
    </form>
    </>
  );
}

export default App

1. Why can I not click inside the form and change the value?
2. How can I log the value of the input whenever clicking inside and changing it?
3. How can I log the value of the onput on submit?

Thanks... Here is a stackblitz demo: https://stackblitz.com/edit/react-tvk69a

Answer 1

EDITED: Why can I not click inside the form and change the value?

You are passing a hard coded value in your form Input, you need to replace it with a value you can control in your components. So you can add add something to your state to track it such as:

const [value, setValue] = React.useState('')

and interpolate it in your input element:

<input value={value}...

finally you need to handle the changes so that the state is updated:

<input value={value} onChange={e => setValue(e.target.value)}

How can I log the value of the input whenever clicking inside and changing it?

You can use the onClick and onChange props and pass there your handler:

<button onClick={activateLasers}> Activate Lasers </button>.

<input value={value} onChange={e => setValue(e.target.value)} />

How can I log the value of the onput on submit?

on the tag you can pass an onSubmit prop with your handler that will trigge from its inner type='submit'

<form onSubmit={handleSubmit}>

Answer 2

Here U can see a full example:

import React, { useState, useEffect } from "react";

const App = () => {
  const [textV, setTextV] = useState("the value");

  const onNameChange = () => {
    event.preventDefault();
    console.log("name change Fn", textV);
  };

  useEffect(() => {
    console.log("Text has changed: ", textV);
  }, [textV]);

  return (
    <form onSubmit={onNameChange}>
      <input
        value={textV}
        type="text"
        onChange={e => setTextV(e.target.value)}
      />
      <button type="submit">Submit</button>
    </form>
  );
};

export default App;

You can play with it here: https://stackblitz.com/edit/react-ky2cks?file=src/App.js

Explanation: To take control over change of the value of text-area you should use a react state

import React, { useState, useEffect } from "react";
    
    const App = () => {
      const [textV, setTextV] = useState("the value");

Then you need to have a submit button to call the onSubmit event on the form

       <form onSubmit={onNameChange}>
          <input
            value={textV}
            type="text"
            onChange={e => setTextV(e.target.value)}
          />
          <button type="submit">Submit</button>
        </form>

In the form you can see I change the input value from "the value" to {textV} because textV is the state I declare before and in the onChange function I call the state handler function to change the value of the state textV, this function allows me to update the state each time the input value change.

To log the value of the state each time the input value change you can use the useEffect hook:

 useEffect(() => {
    console.log("Text has changed: ", textV);
  }, [textV]);