I’m researching using React in NetSuite. Step 1, decide if React is worth using. As I’ve attended several developer conferences, I’m getting the impression that unless I use React, I’m some kind of dinosaur and working way too hard at UI. OK… let’s give React a try.

My first stumbling block was the amount of code I needed to write to render a component. Crazy! It was complex and wordy. I must be missing something. So I stopped and looked for a simple example of a component that might represent 80% of the functionality I’d need in all future React components. How about simply submitting a standard HTML form.

In a PluralSight class on React, I learned there are 2 ways to build a React component, using JavaScript classes or functions with hooks. Confusing! According to my instructor, classes are on their way out. Forms and hooks are the way to go. However, most forms submission examples I found were written using JavaScript classes.

All examples I found using functions and hooks either didn’t work or were overly complicated. I wanted a SIMPLE example. So I wrote one.

Here is my simple React component built using functions and hooks. To run it, open http://jscomplete.com/playground and paste in this code.

The key things to understand are these:

1. When you create JavaScript variables which are bound to the input fields in your form, you create them as useState() objects. This translates to an array of 2 elements. The first is the variable used in the binding. And the second is a function that sets the stateful variable’s value. So username and email are stateful strings. setUsername and setEmail are functions which change the state of username and email.
2. The value attributes of each of the 2 input fields in the form are bound to the 2 stateful strings. This is done in the value={variable name}. The curly brackets tell React to do the binding.
3. The onChange events are each executing an inline function that accepts the EventArgs (e) and then passes the changed value to the corresponding setter function which updates the associated stateful string variable.

Here is my code in a format you can cut and paste directly into jscomplete.com.

const App = (props) => {
// Declare all your form variables here with state
const [username, setUsername] = useState();
const [email, setEmail] = useState();

// Here is where you have access to all variable prior to submitting the form
const handleSubmit = event => {
alert(username + ‘ – ‘ + email); // Form variables
event.preventDefault(); // Stop event bubbling
}

// HTML form here – All onChange events are handled inline
return (
<form onSubmit={handleSubmit}>
Username:<br />
<input
type=”text”
value={username}
onChange={(e) => setUsername(e.target.value)}
/><br />
<br />
Email:<br />
<input
type=”text”
value={email}
onChange={(e) => setEmail(e.target.value)}
/><br />
<br />
<button>Submit</button>
</form>
)
}

// Load your React component here
ReactDOM.render(
<App />,
document.getElementById(‘mountNode’)
);