Develop Reference

onValidated is not a function when trying to subscribe user to mailchimp

I am using "react-mailchimp-subscribe" to integrate with MailChimp and enable users to signup to a mailchimp mailing list upon completing an submitting my form.
However, I get the error:
Uncaught TypeError: onValidated is not a function
When I trigger the function that should submit the form info to MailChimp.
Here is a sample of my code:
import MailchimpSubscribe from "react-mailchimp-subscribe";
...
const CustomForm = ({
className,
topOuterDivider,
bottomOuterDivider,
topDivider,
bottomDivider,
hasBgColor,
invertColor,
split,
status,
message,
onValidated,
...props
}) => {
...
const [email, setEmail] = useState('');
const [fullName, setFullName] = useState('');
const handleSubmit = (e) => {
console.log('handlesubmit triggered')
e.preventDefault();
email &&
fullName &&
email.indexOf("#") > -1 &&
onValidated({
EMAIL: email,
MERGE1: fullName,
});
}
...
<form onSubmit={(e) => handleSubmit(e)}>
<h3>
{status === "success"
? "You have successfully joined the mailing list"
: "Join our mailing list by completing the form below"
}
</h3>
<div className="cta-action">
<Input
id="email"
type="email"
label="Subscribe"
labelHidden hasIcon="right"
placeholder="Your email address"
onChange={e => setEmail(e.target.value)}
value={email}
isRequired
>
</Input>
<Input
id="name"
type="text"
label="Subscribe"
labelHidden hasIcon="right"
placeholder="Your full name"
onChange={e => setFullName(e.target.value)}
value={fullName}
isRequired
>
</Input>
<Input
type="submit"
formValues={[email, fullName]}
/>
</div>
</form>
This is the parent component passing down props to the above:
import React from "react";
import MailchimpSubscribe from "react-mailchimp-subscribe";
const MailchimpFormContainer = props => {
const postURL = `https://*li$%.list-manage.com/subscribe/post?u=${process.env.REACT_APP_MAILCHIMP_U}$id=${process.env.REACT_APP_MAILCHIMP_ID}`;
return (
<div>
<MailchimpSubscribe
url={postURL}
render={({ subscribe, status, message }) => (
<CustomForm
status={status}
message={message}
onValidated={ formData => subscribe(formData) }
/>
)}
/>
</div>
);
};

where to call the Axios post request in reactjs

I have a form,thats data are saved in the state to be sent to the backend server.
i am handling the form with handleSubmit function and useEffect hook, where the handleSubmit prevents the form from being submitted unless it calls the validation function, in the useEffect I check if there are any errors using if condition and then console.log my data.
now I want to post the data hold in the state -the state is sent as a props to me- but I am confused whether to put the request in the HandleSubmit function or in the useEffect inside the body of the if condition.
import react, { Component, useState, useEffect } from 'react';
import {useNavigate } from 'react-router-dom';
import axios from 'axios';
import './sign.css';
const SignA = (props) => {
const navigate = useNavigate();
const [formErrors, setFormErrors] = useState({});
const [isSubmit, setIsSubmit] = useState(false);
const handleSubmit = (err) => {
err.preventDefault();
setFormErrors(validate(props.data));
setIsSubmit(true);
}
useEffect(() => {
console.log(Object.keys(formErrors).length);
if (Object.keys(formErrors).length === 0 && isSubmit) {
console.log('console the props data', props.data)
//here is where I think the post request should be put
if (isSubmit) {
return (navigate('/profileadmin'))
}
}
}, [formErrors])
const validate = (values) => {
const errors = {};
const regex = /^[^\s#]+#[^\s#]+\.[^\s#]{2,}$/i;
if (!values.firstname) {
errors.firstname = 'firstname is required!';
}
if (!values.lastname) {
errors.lastname = 'lastname is required!';
}
if (!values.mobile) {
errors.mobile = 'mobile is required!';
}
if (!values.email) {
errors.email = 'email is required!';
} else if (!regex.test(values.email)) {
errors.email = 'this is not a valid email format!'
}
return errors;
}
return (
<div className='signup'>
<form onSubmit={handleSubmit} >
<div className="container">
<h1>Sign Up</h1>
<div className="name">
<div>
<input
type="text"
placeholder="First name"
name="firstname"
id='firstName'
value={props.data.firstname}
onChange={props.change}
/>
</div>
<div>
<input
type="text"
placeholder="Last name"
name="lastname"
value={props.data.lastname}
onChange={props.change}
/>
</div>
</div>
<p className='errorMsg'>{formErrors.firstname}</p>
<p className='errorMsg'>{formErrors.lastname}</p>
<br />
<div>
<input
type="text"
placeholder="Business mobile number"
name="mobile"
value={props.data.mobile}
onChange={props.change}
/>
<p className='errorMsg'>{formErrors.mobile}</p>
<br />
<input
type="text"
placeholder="Email Adress"
name="email"
value={props.data.email}
onChange={props.change}
/>
<p className='errorMsg'>{formErrors.email}</p>
<br />
</div>
</div>
<br />
<div className="checkbox">
<label>
<input type="checkbox" className="check" />i’ve read and agree with <a href="url" >Terms of service</a>
</label>
</div>
<div className="clearfix">
<button type="submit" className="signupbtn">Sign Up</button>
</div>
</div>
</form >
</div >
)
}
export default SignA;
this is the request
axios.post('', props.data)
.then(res => console.log('post res', res))
.catch(error => {
console.error('There was an error in post request!', error);
});

You don't necessarily need useEffect here.
Here is how you can implement such thing:
Declare a state to hold form values:
const [formData, setFormData] = useState({})
Declare function to set the state:
const handleChange = (name, value) => {
setFormData({...formData, [name]: value})
}
Input onChange to capture:
// handleChange has two parameters
<input
type="text"
placeholder="First name"
name="firstname"
id='firstName'
value={props.data.firstname}
onChange={(event) => handleChange('firstName', event.target.value)}
/>
function for calling post axios post request
const handleSubmit = () => {
//check for validations code here
// if validations are right then post request here
// this will give you all the fields like firstName: "", lastName: ""
let requestBody = {
...formData
}
axios.post("url", requestBody).then((res)=> {
//your code here
})
}

React form onSubmit function not being called

I have a form on my page with an onSubmit function that I want to be called, but it doesn't seem to be triggered as the console.log never appears.
import React, { Component } from 'react'
class EmailSignUp extends Component {
constructor(props) {
super(props)
this.state = {
email: '',
lastName: '',
error: false
}
this.handleChange = this.handleChange.bind(this)
this.onSubmitForm = this.onSubmitForm.bind(this)
}
onSubmitForm (e) {
console.log('function has run');
e.preventDefault()
let formData = new FormData(e)
const { formAction } = this.props
const requestOptions = {
method: 'POST',
body: formData
}
fetch(formAction, requestOptions)
.then(response => response.text())
.then(result => console.log(result))
.catch(error => console.log('error', error))
}
handleChange (e) {
const value = e.target.value
const inputId = e.target.id
this.setState(() => ({
[inputId]: value
}))
}
render () {
const { error } = this.state
return (
<div id='email-form' className='container'>
<form
name='form'
id='form'
onSubmit={this.onSubmitForm}
method='post'
>
<div className='form-group'>
<label htmlFor='email'>Email</label>
<input
type='email'
name='Email'
className='form-control'
id='email'
placeholder='youremail#email.com'
onChange={this.handleChange}
value={this.state.email}
required
/>
</div>
<div className='form-group'>
<label htmlFor='lastName'>Last name</label>
<input
type='text'
name='lastName'
className='text form-control'
id='lastName'
placeholder='Last Name'
onChange={this.handleChange}
value={this.state.lastName}
required
/>
</div>
<button
type='submit'
name='Submit'
value='Subscribe'
className='btn btn-primary item_cta'
readOnly
/>
</form>
{error && <p>{error}</p>}
</div>
)
}
}
export default EmailSignUp

Running your code results in the error 'Failed to construct 'FormData': parameter 1 is not of type 'HTMLFormElement'. The actual form element would be on target of the submit event. Try the following by updating e to e.target:
let formData = new FormData(e.target);
const { formAction } = this.props;
Also remove method from the form element. In addition, remove readOnly from button. It is not meant to be a self closing element like a br:
<button
type="submit"
name="Submit"
value="Subscribe"
className="btn btn-primary item_cta"
>submit</button>
Hopefully that helps!

disable form submit button until user checks recaptcha checkbox

I'm trying to disable my form's submit button until the user clicks the Google Recaptcha checkbox 'I am not a robot'
Is there anyway to do this or do I need to download a React component specific to Google Recaptcha?
Here is my simple component that contains the Google Recaptcha:
const RecaptchaComponent = () => {
useEffect(() => {
// Add reCaptcha
const script = document.createElement("script");
script.src = "https://www.google.com/recaptcha/api.js"
document.body.appendChild(script);
}, [])
return (
<div
className="g-recaptcha"
data-sitekey="6LeS8_IdfdfLtQzwUgNV4545454lhvglswww14U"
></div>
)
};
And here is my form's onSubmit code:
const GameForm = () => (
<div className="app">
<Formik
initialValues={{
email: "",
name: "",
title: ""
}}
onSubmit={(values) => {
//new Promise(resolve => setTimeout(resolve, 500));
axios({
method: "POST",
url: "api/gameform",
data: JSON.stringify(values),
});
}}
>
{props => {
const {
values,
isSubmitting,
handleSubmit,
} = props;
return (
<form onSubmit={handleSubmit}>
<div>Your Game</div>
<label htmlFor="title">
Game Title:
</label>
<Field
id="title"
type="text"
values={values.title}
/>
<label htmlFor="name">
Name:
</label>
<Field
id="name"
type="text"
value={values.name}
/>
<label htmlFor="email">
Email:
</label>
<Field
id="email"
name="email"
type="email"
value={values.email}
/>
<div>
<ReCAPTCHA
sitekey="6LeS8_IUAAAAAhteegfgwwewqe223"
onChange={useCallback(() => setDisableSubmit(false))}
/>
</div>
<div>
<Button type="submit">
Submit
</Button>
</div>
</form>
);
}}
</Formik>
</div>
);

You don't need to use the react component, but it's easier.
export const MyForm = () => {
const [disableSubmit,setDisableSubmit] = useState(true);
return (
... rest of your form
<ReCAPTCHA
sitekey="6LeS8_IdfdfLtQzwUgNV4545454lhvglswww14U"
onChange={useCallback(() => setDisableSubmit(false))}
/>
<button type="submit" disabled={disableSubmit}>Submit</button>
)
}
EDIT:
One of my biggest pet peeves is seeing React tutorials where authors encourage devs to use functions that return JSX instead of just using functional components.
Formik's "children as a function" pattern is gross (react-router-dom does the same thing) - it should be a component:
const GameForm = () => {
return <Formik ...your props>{props => <YourForm {...props}/>}</Formik>
}
const YourForm = (props) => {
const [disableSubmit,setDisableSubmit] = useState(true);
... everything inside the child function in `GameForm`
}

Bind child component click handler to parent state

None of the other SO answers have helped, so I think I'm missing something conceptually.
I have a Parent (Wrapper) component, and a Child (Input) component. The Parent passes a function down to the child:
const Wrapper = () => {
const [dictionary, setDictionary] = useState([{ word: "init", definition: "def init" }]);
const handleWordChange = (e, value) => {
e.preventDefault();
/// IS NEVER TRIGGERED
};
return (
<Input setDictionary={{ setDictionary }} onChange={handleWordChange} />
)
}
The child component handles its own state, but is supposed to update the Parent props by calling the setDictionary function:
const Input = props => {
const [definition, setDefinition] = useState("");
const [word, setWord] = useState("");
const handleSubmit = e => {
const { setDictionary } = props.setDictionary;
e.preventDefault();
setDictionary([{ word, definition }]);
}
return (
<form onSubmit={handleSubmit}>
<input
name='word'
onChange={e => setWord(e.target.value)}
onFocus={() => setWord("")}
placeholder='Word'
type='text'
value={word}
/>
<input
name='definition'
onChange={e => setDefinition(e.target.value)}
onFocus={() => setDefinition("")}
placeholder='Definition'
type='text'
value={definition}
/>
<input type='submit' value='Submit' />
</form>
)
}
Other answers I have seen suggest to pass a callback to the Child (setDictionary), but the onChange handler is never called on change. I've also tried to use onSubmit instead.
How do I successfully update dictionary?
I know the above creates a dependency of the Child to the Parent, is there a better programmatic way to achieve this, considering that I eventually need to pass down dictionary to a 2nd child?

You cannot assign child's onChange() event handler this way.
Instead, you refer to child event handlers as props and bind parent callbacks to those props.
The concept is known as lifting state up.
Complete live-demo of your use case you may find below:
const { render } = ReactDOM,
{ useState } = React
const Input = ({onInput}) => {
const [word, setWord] = useState(''),
[definition, setDefinition] = useState('')
return (
<form onSubmit={e => (e.preventDefault(), onInput(word, definition))}>
<label>
Word:
<input onChange={({target:{value}}) => setWord(value)} />
</label>
<label>
Definition:
<input onChange={({target:{value}}) => setDefinition(value)} />
</label>
<input type="submit" value="Submit" />
</form>
)
}
const List = ({list}) => (
<ul>
{
list.map(({word,definition},key) => <li {...{key}}><strong>{word}</strong> - {definition}</li>)
}
</ul>
)
const Parent = () => {
const [dictionary, setDictionary] = useState([]),
onDicionaryItemSubmit = (word,definition) => setDictionary([...dictionary, {word,definition}])
return (
<div>
<Input onInput={onDicionaryItemSubmit} />
<List list={dictionary} />
</div>
)
}
render (
<Parent />,
document.getElementById('root')
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script><div id="root"></div>

//there is not props.onChange here in this component
const Input = props => {
const [definition, setDefinition] = useState("");
const [word, setWord] = useState("");
const handleSubmit = e => {
const { setDictionary } = props.setDictionary;
e.preventDefault();
setDictionary([{ word, definition }]);
//like here
props.onChange(any arguments);
}
return (
<form onSubmit={handleSubmit}>
<input
name='word'
onChange={e => {
setWord(e.target.value)
props.onChange();
}}
onFocus={() => setWord("")}
placeholder='Word'
type='text'
value={word}
/>
<input
name='definition'
onChange={e => {
setDefinition(e.target.value)
props.onChange();
}}
onFocus={() => setDefinition("")}
placeholder='Definition'
type='text'
value={definition}
/>
<input type='submit' value='Submit' />
</form>
)
}
Use parent onChange() method in your Input Component than it will be triggered if you didn't call that method than how it will triggered i hope this will help you.

You're not even triggering onChange passed to component
<Input setDictionary={{ setDictionary }} onChange={handleWordChange} />
you have to do exactly as you named the prop like props.onChange
//there is no props.onChange here in this component
const Input = props => {
const [definition, setDefinition] = useState("");
const [word, setWord] = useState("");
const handleSubmit = e => {
const { setDictionary } = props.setDictionary;
e.preventDefault();
setDictionary([{ word, definition }]);
//like here
props.onChange(any arguments);
}
return (
<form onSubmit={handleSubmit}>
<input
name='word'
onChange={e => setWord(e.target.value)}
onFocus={() => setWord("")}
placeholder='Word'
type='text'
value={word}
/>
<input
name='definition'
onChange={e => setDefinition(e.target.value)}
onFocus={() => setDefinition("")}
placeholder='Definition'
type='text'
value={definition}
/>
<input type='submit' value='Submit' />
</form>
)
}
If i rename
<Input setDictionary={{ setDictionary }} onInputChanged={handleWordChange} />
i'd call it like
const handleSubmit = e => {
const { setDictionary } = props.setDictionary;
e.preventDefault();
setDictionary([{ word, definition }]);
//like here
props.onInputChanged(any arguments);
}

Error:- not calling onChange function in <Input/> and setting state of dictionary in <Wrapper />. This is the working solution of your query.
const {useState} = React;
const Wrapper = () => {
const [dictionary, setDictionary] = useState([
{ word: "computer", definition: "an electronic device for storing and processing data" }
]);
const handleWordChange = (e, value) => {
e.preventDefault();
let updateDictionary = [...dictionary];
updateDictionary.push(value);
setDictionary(updateDictionary);
// console.log(updateDictionary);
/// IS NEVER TRIGGERED
};
return (
<React.Fragment>
<Input onChange={handleWordChange} />
{dictionary.length > 0 ? (
<table>
<tr>
<th>WORD</th>
<th>DEFINITION</th>
</tr>
{dictionary.map(datum => (
<tr>
<td>{datum.word}</td>
<td>{datum.definition}</td>
</tr>
))}
</table>
) : null}
</React.Fragment>
);
};
const Input = props => {
const [definition, setDefinition] = useState("");
const [word, setWord] = useState("");
const handleSubmit = e => {
e.preventDefault();
props.onChange(e, { word, definition });
};
return (
<form onSubmit={handleSubmit}>
<input
name="word"
onChange={e => setWord(e.target.value)}
onFocus={() => setWord("")}
placeholder="Word"
type="text"
value={word}
/>
<input
name="definition"
onChange={e => setDefinition(e.target.value)}
onFocus={() => setDefinition("")}
placeholder="Definition"
type="text"
value={definition}
/>
<input type="submit" value="Submit" />
</form>
);
};
ReactDOM.render(<Wrapper />, document.getElementById('root'));
table,
th,
td {
border: 1px solid black;
}
table {
margin-top: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>