I want to create a simple contact form in ReactJS but I see in the inspector console this lines of warning:
Warning: Using UNSAFE_componentWillReceiveProps in strict mode is not recommended and may indicate bugs in your code. See some url for details.
* Move data fetching code or side effects to componentDidUpdate.
* If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: some web
Please update the following components: Wrapper index.js:1
Warning: Can't call setState on a component that is not yet mounted. This is a no-op, but it might indicate a bug in your application. Instead, assign to `this.state` directly or define a `state = {};` class property with the desired state in the Wrapper component.
Can I get some example how to fix this warnings.
My code from contact form:
import React, { Component } from 'react'
import * as emailjs from 'emailjs-com'
import { Button, Form, FormGroup, Label, Input } from 'reactstrap'
import { Container } from 'reactstrap';
class ContactForm extends Component {
state = {
name: '',
email: '',
subject: '',
message: '',
}
handleSubmit(e) {
e.preventDefault()
const { name, email, subject, message } = this.state
let templateParams = {
from_name: name,
to_name: 'some@gmail.com',
from_mail: email,
subject: subject,
message_html: message,
}
emailjs.send(
'gmail',
'template_id',
templateParams,
'user_id'
)
this.resetForm()
}
resetForm() {
this.setState({
name: '',
email: '',
subject: '',
message: '',
})
}
handleChange = (param, e) => {
this.setState({ [param]: e.target.value })
}
render() {
return (
<div>
<Container>
<Form onSubmit={this.handleSubmit.bind(this)}>
<FormGroup controlid="formBasicEmail">
<Label className="text-muted">Email address</Label>
<Input
type="email"
name="email"
value={this.state.email}
className="text-primary"
onChange={this.handleChange.bind(this, 'email')}
placeholder="Enter email"
/>
</FormGroup>
<FormGroup controlid="formBasicName">
<Label className="text-muted">Name</Label>
<Input
type="text"
name="name"
value={this.state.name}
className="text-primary"
onChange={this.handleChange.bind(this, 'name')}
placeholder="Name"
/>
</FormGroup>
<FormGroup controlid="formBasicSubject">
<Label className="text-muted">Subject</Label>
<Input
type="text"
name="subject"
className="text-primary"
value={this.state.subject}
onChange={this.handleChange.bind(this, 'subject')}
placeholder="Subject"
/>
</FormGroup>
<FormGroup controlid="formBasicMessage">
<Label className="text-muted">Message</Label>
<Input
type="textarea"
name="message"
className="text-primary"
value={this.state.message}
onChange={this.handleChange.bind(this, 'message')}
/>
</FormGroup>
<Button variant="primary" type="submit">
Submit
</Button>
</Form>
</Container>
</div>
)
}
}
export default ContactForm
I not have componentDidMount but I dont know how to create and which part of code to put in the componentDidMount if this is the problem ?
Aucun commentaire:
Enregistrer un commentaire