Develop Reference

When should I call custom hook not breaking any rules of hooks?

I do have a simple component with form. I want to use useSendEmail hook which returns the server response (success or failure). Where do I call this hook so it doesn't fire on the first render but only after I get my data from the user and save it in the state?
Expected behaviour: hook useSendEmail is called when the email object contains users input and returns status (if sent successfully or not).
I am aware I need to call hook at the top level in the component, but I do I wait for the data from input fields?
Actual behaviour: I am breaking the rule of hooks.
// importing everything I need here
const ContactPage = () => {
const initial = {
from: '',
message: '',
email: '',
};
const [formData, setFormData] = useState(initial);
const [email, setEmail] = useState(null);
const handleChange = ({ name, value }) => {
setFormData({ ...formData, [name]: value });
};
useEffect(() => {
if (email === null) return;
const response = useSendEmail(email);
}, [email]);
const handleSubmit = (e) => {
e.preventDefault();
setEmail(formData);
};
return (
<DefaultLayout title="Contact">
<StyledContainer>
<form className="contact_form" onSubmit={(e) => handleSubmit(e)}>
<input
name="from"
type="text"
value={formData.from}
onChange={(e) => handleChange(e.target)}
placeholder="Your full name"
/>
<textarea
name="message"
value={formData.message}
onChange={(e) => handleChange(e.target)}
placeholder="Your Message"
/>
<input
name="email"
type="email"
value={formData.email}
onChange={(e) => handleChange(e.target)}
placeholder="Your e-mail"
/>
<button type="submit">SUBMIT</button>
</form>
</StyledContainer>
</DefaultLayout>
);
};
export default ContactPage;
EDIT:
this is how my hook looks like after refactoring with your suggestions. I am now importing the hook and the method in the top level component and everything seems to work perfectly.
import { useState } from 'react';
import emailjs from 'emailjs-com';
import { userID, templateID, serviceID } from '../data/account';
const useSendEmail = (email) => {
const [response, setResponse] = useState(null);
const successMsg = 'Your message has been successfully sent';
const errorMsg = 'Your message has not been sent. Try again.';
const sendEmail = async () => emailjs
.send(serviceID, templateID, email, userID)
.then(
(res) => {
if (res.status === 200) {
setResponse(successMsg);
}
if (res.status !== 200) {
setResponse(errorMsg);
}
},
(err) => {
console.log(err);
},
);
return { response, sendEmail }
};
export default useSendEmail;

How do i get the value of text input field using react

I'm creating a register form in react with validation. The values i'm asking is Username, Email, password + (controll password). Everything about the form works, validations, Errors and if you click sign up you go to a new page. Now i want to extract the values to a my MySql database. I succeed in putting stuff in my database so the link works but i can't get the values of what i typed in the form.
I have tried
onChange={(e) => {
setUsernameReg(e.target.value);
}}
(see commented item)
But when i tried this I couldn't fill anything in Username. The code for the other inputs (email, password) is the same apart from the names.
So in short I want to get the value what you typed in a textbox to my database.
Code: FormSignup.js
import React, { useEffect, useState } from 'react';
import Axios from 'axios';
import validate from './validateInfo';
import useForm from './useForm';
import './Form.css';
const FormSignup = ({ submitForm }) => {
const { handleChange, handleSubmit, values, errors } = useForm(
submitForm,
validate
);
const [usernameReg, setUsernameReg] = useState("");
const [emailReg, setEmailReg] = useState("");
const [passwordReg, setPasswordReg] = useState("");
Axios.defaults.withCredentials = true;
const register = () => {
Axios.post("http://localhost:3001/register", {
username: usernameReg,
password: passwordReg,
email: emailReg,
}).then((response) => {
console.log(response);
});
};
return (
<div className='form-content-right'>
<form onSubmit={handleSubmit} className='form' noValidate>
<h1>
Get started with us today! Create your account by filling out the
information below.
</h1>
<div className='form-inputs'>
<label className='form-label'>Username</label>
<input
className='form-input'
type='text'
name='username'
placeholder='Enter your username'
value={values.username}
onChange={handleChange}
/*
//onChange={(e) => {
// setUsernameReg(e.target.value);
//}}
*/
/>
Code UseForm.js
import { useState, useEffect } from 'react';
import Axios from 'axios';
const useForm = (callback, validate) => {
const [values, setValues] = useState({
username: '',
email: '',
password: '',
password2: ''
});
const [errors, setErrors] = useState({});
const [isSubmitting, setIsSubmitting] = useState(false);
const [usernameReg, setUsernameReg] = useState("");
const [emailReg, setEmailReg] = useState("");
const [passwordReg, setPasswordReg] = useState("");
Axios.defaults.withCredentials = true;
const register = () => {
Axios.post("http://localhost:3001/register", {
username: usernameReg,
password: passwordReg,
email: emailReg,
}).then((response) => {
console.log(response);
});
};
const handleChange = e => {
const { name, value } = e.target;
setValues({
...values,
[name]: value
});
};
const handleSubmit = e => {
e.preventDefault();
setErrors(validate(values));
setIsSubmitting(true);
};
useEffect(
() => {
if (Object.keys(errors).length === 0 && isSubmitting) {
callback();
}
},
[errors]
);
return { handleChange, handleSubmit, values, errors };
};
export default useForm;
The code is from https://www.youtube.com/watch?v=KGFG-yQD7Dw&t and https://www.youtube.com/watch?v=W-sZo6Gtx_E&t

By using the value prop of the input, you turn it into a controled input element and thus need to update its value via a state variable. So this:
<input
className='form-input'
type='text'
name='username'
placeholder='Enter your username'
value={values.username}
onChange={handleChange}
/*
//onChange={(e) => {
// setUsernameReg(e.target.value);
//}}
*/
/>
Should just be this:
<input
className='form-input'
type='text'
name='username'
placeholder='Enter your username'
value={usernameReg}
onChange={e => setUsernameReg(e.target.value)}
/>
Note that this only answers this part:
I succeed in putting stuff in my database so the link works but i can't get the values of what i typed in the form
So this is how you can access those values. I can't guide you on how to get those values all the way to your DB as there is a longer distance they have to travel and I don't know what else could be in the way.
You should also look into useRef(), which will give you access to those input fields without updating your state on every change of the input and thus re-rendering your form over and over.
You can do something like this:
...
const regInput = React.useRef();
...
...
<input
ref={regInput}
className='form-input'
type='text'
name='username'
placeholder='Enter your username'
Then when you're ready to submit, just access the value of the username input like so:
...
const v = regInput.current.value;
...

TypeError: Cannot read property 'value' of undefined in REACTJS

I am getting this error on handleChange. I want to know what would be the issue??
const [testState, setTestState] = useState({
activeStep:0,
firstName: '',
lastName: '',
email: '',
occupation: '',
city: '',
bio: ''
});
const { activeStep } = testState;
const { firstName, lastName, email, occupation, city, bio } = testState;
const values = { firstName, lastName, email, occupation, city, bio }
const handleChange = (e) => {
const value = e.target.value;
setTestState({
...testState,
[e.target.name]: value
});
};
const handleNext = () => {
debugger
const { activeStep } = testState;
setTestState({activeStep:activeStep+1});
};
const handleBack = () => {
debugger
const { activeStep } = testState;
setTestState({activeStep:activeStep-1});
};
I am using this in material ui Stepper, like this. I want to textfield data to be there when i click next or back button. I hope you are familiar with Material Ui Stepper, it will be real help.
function getStepContent(step) {
switch (step) {
case 0:
return (
<TransportationDetail
handleNext={handleNext}
propsTransportation={propsParent.propsRateDetailsData}
exhandleChange={(e) => exhandleChange(e)}
values={values}
/>
);
case 1:
return (
<Testing 1
handleNext={handleNext}
handleBack={handleBack}
exhandleChange={(e) => exhandleChange(e)}
values={values}
/>
);
case 2:
return (
<Testing 2
handleNext={handleNext}
handleBack={handleBack}
exhandleChange={(e) => exhandleChange(e)}
values={values}
/>
);
default:
return "No data available";
}
}
Now passing as props to <Testing 1 /> Component like this:
const { values, exhandleChange } = props;
and to the textfield
<TextField
fullWidthid="outlined-size-normal"
variant="outlined"
name="firstName"
onChange={exhandleChange()}
value={values.firstName}
/>
<TextField
fullWidthid="outlined-size-normal"
variant="outlined"
name="lastName"
onChange={exhandleChange()}
value={values.lastName}
/>

There are 3 vulnerable places where the testState might get corrupted.
in handleChange
in handleNext, or
in handleBack
Looking at the code snippet, I believe you just want to update the value of activeStep in testState by incrementing or decrementing the value by 1 in handleNext and handleBack. And for handleChange, you want to go to the selected index.
Here we need to appreciate the beauty of spread operator coz that is only going to solve our problem. For handleNext and handleBack you may follow this code snippet,
const handleBack = () => {
const { activeStep } = testState;
const tempState = {...testState}
tempState.activeStep = activeStep - 1
setTestState(tempState);
};
const handleNext = () => {
const { activeStep } = testState;
const tempState = {...testState}
tempState.activeStep = activeStep + 1
setTestState(tempState);
};
const handleChange = (e) => {
const tempState = {...testState}
tempState.activeStep = e
setTestState(tempState);
};
And pass the selectedIndex of the component to handleChange while calling the function.

How to correctly update state with useState and forms?

I'm wanted to write a simple login form and validate the input. For that I just have a username and password input as well as a button to submit the inputs. However the error state is only correctly updated after submitting the form twice.
const LoginForm = () => {
const [account, setAccount] = useState({ username: "", password: "" });
const [errors, setErrors] = useState({});
const validate = () => {
const newErrors = {};
if (account.username.trim() === "")
newErrors.username = "Username is required.";
if (account.password.trim() === "")
newErrors.password = "Password is required.";
return Object.entries(newErrors).length === 0 ? null : newErrors;
};
const handleSubmit = e => {
e.preventDefault();
setErrors(validate());
if (errors) return;
// Call server
console.log("Submitted");
};
const handleChange = ({ currentTarget: input }) => {
account[input.name] = input.value;
setAccount({ ...account });
};
return (
<div>
<h1>Login</h1>
<form onSubmit={handleSubmit}>
<Input
name="username"
value={account.username}
label="Username"
onChange={handleChange}
/>
<Input
name="password"
value={account.password}
label="Password"
onChange={handleChange}
/>
<button className="btn btn-primary">Login</button>
</form>
</div>
);
};
error should be set to null if both input fields are not empty otherwise it should be set to an object including a description of the errors.

At the time you first submit you are still referencing the old error state thus your code won't work. The errors variable will updated after the next render. You need to change your handle submit like this.
const handleSubmit = e => {
e.preventDefault();
const updatedErrors = validate();
// setErrors won't change the value of errors at this point but when the re-render
// happens the new errors variable will have your updates
setErrors(updatedErrors);
if (updatedErrors) return;
// Call server
console.log("Submitted");
};
Think about using the old setState. if you had the following:
const { errors } = this.state;
const updatedErrors = validate();
this.setState(updatedErrors);
// at this point errors !== newErrors

initialValues does not get update when updating the form

I have a form called Client which has a single form which handles both add and edit. Add is working but when editing the form(form
is populated with initialValues if it's and edit form), the initialValues does not get update. I mean, if I go to client A form and update the
field called client_name from 'abc' to 'xyz' then the client_name will be saved as 'xyz' in server but the initialValues does not get update
so if i again go to same form without refreshing the page and save the form without changing anything then client_name is saved with previous
value i. 'abc' because initialValues is not updated when updating the field.
Here is my code
import React, { Component } from 'react';
import { reduxForm, initialize } from 'redux-form';
const mapDispatchToProps = (dispatch, props) => ({
addClient: clientData => dispatch(addClient(clientData)),
editClient: clientData => dispatch(editClient(clientData)),
loadClient: () => dispatch(loadClient(props.match.params.company)),
resetClient: () => dispatch(resetClient()),
});
const mapStateToProps = createStructuredSelector({
initialValues: selectClient(),
});
class Client extends Component<propsCheck> {
state = {
client: initialState,
isLoading: false,
};
componentDidMount() {
if (this.props.match.params.company) {
this.props.loadClient();
}
}
componentWillReceiveProps(nextProps) {
if (this.props.match.params.company) {
this.props.loadClient();
} else {
this.props.resetClient();
}
}
handleChange = ({ target: { name, value } }) => {
this.setState({ client: { ...this.state.client, [name]: value } });
};
handleSubmit = event => {
event.preventDefault();
const { client } = this.state;
const { initialValues, addClient: add, editClient: edit } = this.props;
if (isEmpty(initialValues)) {
add(client);
} else {
const updatedClient = updatedValue(initialValues, client, 'id');
edit(updatedClient);
}
this.setState({ isLoading: true });
};
render() {
const { invalid, submitting, initialValues } = this.props;
return (
<ClientForm
loading={this.state.isLoading}
handleChange={this.handleChange}
handleSubmit={this.handleSubmit}
disabled={invalid || submitting}
type={initialValues && initialValues.id ? 'Edit' : 'Add'}
reset={this.props.reset}
history={this.props.history}
/>
);
}
}
const withReduxForm = reduxForm({
form: 'clientForm',
fields: requiredFields,
validate,
enableReinitialize: true,
})(Client);
export default connect(
mapStateToProps,
mapDispatchToProps,
)(withReduxForm);

Your initial values are being populated from redux state (selectClient in mapStateToProps) right? So, when you update/edit the client_name, are you changing the data in redux??