Selecting input element form of a react functional component - reactjs

Question

could u help a curious intern developer? ^^
I'm using the form inside a functional react component, there is 4 "fake pages" that Im controlling by buttons to hide/show the others input elements. Everytime the user changes the page by clicking in "Next Page" button Im calling a function to see if the inputs present on that page is correctly filled, If something is missing I wanna show an alert and focus (for example) to the corresponding input.
I already tried to use Jquery but got error saying that $(..) is not defined.
I read in some pages that I could use Refs to make this happen but yet in these pages says that its not indicated to use too much refs in a component, now Im wondering if there is another way to accomplish my goal.
Whats the best way to do this?
My code:
const handlePageChange = (e, pageNumber, action) => {
if(action === '+'){
if(pageNumber === '1'){
const nameArray = contactName.split('' );
if(nameArray.length < 2 || nameArray[1] == ''){
alert('Please inform your full name.');
//$("#contactName").focus();
}else{setPageNumber('2')}
}
}
}
return (
<div className="row">
<form onSubmit={handleSubmit} className="col s12">
{pageNumber==='1' &&
<div id='contact-section' className="row form-section">
<label className='active form-tittle'>Informações de Contato (1/4)</label>
<div className="input-field col s12 ">
<input id="contactName" type="text" className="validate"
value={contactName} onChange={e => setContactName(e.target.value)}
/>
<label className='active' htmlFor="contactName">Nome</label>
</div>
<div className="input-field col s12">
<input id="contactPhones" type="text" className="validate"
value={contactPhones} onChange={e => setContactPhones(e.target.value)}
/>
<label className='active' htmlFor="contactPhones">Telefone de Contato</label>
</div>
<div className="input-field col s12">
<input id="contactEmail" type="email" className="validate"
value={contactEmail} onChange={e => setContactEmail(e.target.value)}
/>
<label className='active' htmlFor="contactEmail">E-mail</label>
</div>
<div className='buttons-box'>
<a className="waves-effect waves-light yellow darken-2 btn" onClick={e=> handlePageChange(e, '1','+')}><i className="material-icons right">chevron_right</i>Next Page</a>
</div>
</div>}

Answer 1

In React, given the advent of JSX, you don't really need to use JQuery.
If you are planning to fully leverage the power of React, or maybe you're confused on why you don't really need JQuery, I suggest to read up on this article...
Refs provide a way to access DOM nodes or React elements created in
the render method.
Now, just taking a look at your code snippet, I suggest you take a different approach. Instead of wrapping all three of your "fake page" components in a form, think about having an entire form per "fake page" (three forms total if you have three pages). Note that you don't have to actually perform a form submit when they hit the next button, but you could just intercept that event, perform validation, accumulate the values into a React context or higher level hook, and render the next page.
With React, (just like other things) you have to learn to think in React. Make sure that you hash out different approaches when you run into problems like this, because if your code gets too spaghetti-like with a bunch of refs pointing everywhere, there is likely a simpler, more elegant approach.
If you are using React.js, I would be inclined to suggest formik or some framework to abstract away some of the complexity of dealing with form state and validation. It will make your life a whole lot easier. I personally use Ant Design's Steps with each Step containing a form. You can always shell out to scss, tailwindcss, less, or the style prop to override Ant Design's classic styles.
Here is an untested example I threw together using Ant Design just so you can understand conceptually where I am coming from.
import React, { useState } from "react";
import { Form, Button, Divider, Steps, message } from "antd";
import { PageOne, PageTwo, PageThree } from "./Pages";
const { Step } = Steps;
function StepperForm() {
const [current, setCurrent] = React.useState(0);
const [globalValues, setGlobalValues] = useState([]);
const [PageOneForm] = Form.useForm();
const [PageTwoForm] = Form.useForm();
const [PageThreeForm] = Form.useForm();
const steps = [
{
title: "Page One",
content: <PageOne formRef={PageOneForm} />,
},
{
title: "Page Two",
content: <PageTwo formRef={PageTwoForm} />,
},
{
title: "Page Three",
content: <PageThree formRef={PageThreeForm} />,
},
];
const prev = () => {
setCurrent(current - 1);
var it = globalValues;
it.pop();
setGlobalValues(it);
};
const next = () => {
switch (current) {
case 0:
PageOneForm.validateFields()
.then((values) => {
setGlobalValues([values]);
setCurrent(current + 1);
})
.catch((errorInfo) => {
message.error(
"You cannot move on until all " +
errorInfo.errorFields.length +
" errors are resolved."
);
});
break;
case 1:
PageTwoForm.validateFields()
.then((values) => {
var it = onBoardValues;
it.push(values);
setGlobalValues(it);
setCurrent(current + 1);
})
.catch((errorInfo) => {
message.error(
"You cannot move on until all " +
errorInfo.errorFields.length +
" errors are resolved."
);
});
break;
case 2:
PageThreeForm.validateFields()
.then((values) => {
var it = onBoardValues;
it.push(values);
setGlobalValues(it);
setCurrent(current + 1);
//call api.
})
.catch((errorInfo) => {
message.error(
"You cannot move on until all " +
errorInfo.errorFields.length +
" errors are resolved."
);
});
break;
}
};
return (
<>
<Steps current={current}>
{steps.map((item) => (
<Step key={item.title} title={item.title} />
))}
</Steps>
<Divider />
<div>{steps[current].content}</div>
<div>
{current > 0 && <Button onClick={() => prev()}>Previous</Button>}
{current < steps.length - 1 && (
<Button onClick={() => next()}>Next</Button>
)}
{current === steps.length - 1 && (
<Button onClick={() => next()}>Done</Button>
)}
</div>
</>
);
}
Where the PageOne component might look like
import React from "react";
import { Form, Input, Row, Col } from "antd";
export function PageOne(props) {
const [form] = Form.useForm();
return (
<div>
<Form
size={"medium"}
form={props.formRef}
name="PageOne"
label="left"
layout="vertical"
>
<Row>
<Col>
<Form.Item
validateTrigger="onBlur"
name="FirstName"
label={"First Name"}
rules={[
{
required: true,
message: "Please enter your first name.",
whitespace: true,
},
]}
>
<Input />
</Form.Item>
</Col>
<Col>
<Form.Item
validateTrigger="onBlur"
name="LastName"
label={"Last Name"}
rules={[
{
required: true,
message: "Please enter your last name.",
whitespace: true,
},
]}
>
<Input />
</Form.Item>
</Col>
</Row>
<Row>
<Col>
<Form.Item
validateTrigger="onBlur"
name="EmailAddress"
label="Primary E-mail"
rules={[
{
type: "email",
message: "Enter a valid E-mail.",
},
{
required: true,
message: "Please enter your E-mail.",
},
]}
>
<Input />
</Form.Item>
</Col>
<Col>
<Form.Item
validateTrigger="onBlur"
name="PhoneNumber"
label="Phone Number"
hasFeedback
rules={[
{
required: true,
message: "Phone number required for MFA.",
},
({ setFieldsValue }) => ({
validator(_, value) {
if (!value) {
return Promise.reject();
}
value = value.toString();
value = value.replace(/[^\d]/g, "");
setFieldsValue({ PhoneNumber: value });
if (value.length < 10) {
return Promise.reject(
"Phone number can't be less than 10 digits"
);
}
if (value.length > 10) {
return Promise.reject(
"Phone number can't be more than 10 digits"
);
}
return Promise.resolve();
},
}),
]}
>
<Input />
</Form.Item>
</Col>
</Row>
<Row>
<Col>
<Form.Item
validateTrigger="onBlur"
name="Password"
label="Password"
rules={[
{
required: true,
message: "Please enter your password.",
},
]}
hasFeedback
>
<Input.Password />
</Form.Item>
</Col>
<Col>
<Form.Item
validateTrigger="onBlur"
name="ConfirmPassword"
label="Confirm Password"
dependencies={["password"]}
hasFeedback
rules={[
{
required: true,
message: "Please confirm your password.",
},
({ getFieldValue }) => ({
validator(_, value) {
if (!value || getFieldValue("Password") === value) {
return Promise.resolve();
}
return Promise.reject(
"The two passwords that you entered do not match."
);
},
}),
]}
>
<Input.Password />
</Form.Item>
</Col>
</Row>
</Form>
</div>
);
}
As you can see, component frameworks help you out a lot (even with form validation). I personally like how ANTD has it included. If you are just learning, there is some value in re-creating the wheel for learning's sake, but after a while, it is important to learn that you don't need to every time.
P.S. Next time, include your complete component code formatted. It makes it hard for us to read and comprehend otherwise.