We Keep Coding

Form update in React : input previous data is erased if the input is left empty when submitted

So, I have a data persistence issue with my form inputs.
If I modify all inputs everything is fine.
But if an input is left empty, its previous data is erased when I submit. I need suggestions for my handleChange to keep data even when an input is not modified.
I tried this but it failed too :
handleChange = e => {
e.persist();
this.setState(prevState => ({
product: { ...prevState.product, [e.target.name]: e.target.value }
}))
}
Here is my EditForm, thanks for your help.
EditForm.js
export default class EditForm extends Component {
constructor(props) {
super(props);
this.state = { product: [] };
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
};
componentDidMount = () => {
axios
.get(`/products/edit-form/${this.props.match.params.id}`)
.then(response => {
console.log(response.data.products);
this.setState({
product: response.data.products
})
});
};
handleChange(e) {
console.log(e.target.name);
this.setState({[e.target.name]: e.target.value})
}
handleSubmit(e) {
const data = {
id: this.props.match.params.id,
reference: this.state.reference,
designation: this.state.designation
}
e.preventDefault();
console.log(data);
axios
.post(`/products/${data.id}`, data )
.then(res => console.log(res))
.catch(err => console.log(err));
};
renderForm() {
return this.state.product.map((product, index) => {
const { id,reference,designation } = product
return(
<>
<Form className="post" onSubmit={this.handleSubmit}>
<Form.Row>
<Form.Group as={Col} controlId="formGridReference">
<Form.Label>Reference</Form.Label>
<Form.Control type="text" value={this.state.product.reference}
onChange={this.handleChange} name="reference" placeholder={reference}/>
</Form.Group>
<Form.Group as={Col} controlId="formGridDesignation">
<Form.Label>Designation</Form.Label>
<Form.Control type="text" value={this.state.product.designation}
onChange={this.handleChange} name="designation" placeholder={designation}/>
</Form.Group>
</Form.Row>
<Button variant="primary" type="submit">
Submit
</Button>
</Form>
</>
);
})
}
render() {
return (
<div>
<h1>Formulaire de modification</h1>
{this.renderForm()}
</div>
);
}
}```

In your EditForm.js, inside handleChange(), you have to maintain your previous state. You can do so by creating a copy of your state. Then use the copy to update your state property values and in the end, use this.setState();
Example:
const state = this.state;
state['Your property'] = 'value';
...
...
this.setState(state);

Data from database displaying in the State but not on screen in React.js

I am new to react and designing an eCommerce website. In the admin side of the website, I have created a database to store customers information. I am able to write to the database and read from it (data is appearing in the state) but I am not able to display the data on screen. I have a function called 'displayCustomerList' to get the data from the state and format it but in the Render part, nothing is being displayed. Any help or advice is much appreciated.
import React, { Component } from "react";
import Title from "./Title";
import { Link, Redirect } from "react-router-dom";
import { ButtonContainer } from "./Button";
import axios from "axios";
export default class Admin extends Component {
constructor(props) {
super(props);
const token = localStorage.getItem("token");
let loggedIn = true;
if (token == null) {
loggedIn = false;
}
this.state = {
loggedIn,
name: "",
address: "",
postcode: "",
phone: "",
posts: [],
};
}
componentDidMount = () => {
this.getCustomerList();
};
getCustomerList = () => {
axios
.get("/api")
.then((response) => {
const data = response.data;
this.setState({ posts: data });
console.log("Data has been received");
})
.catch(() => {
alert("Error retrieving data");
});
};
handleChange = ({ target }) => {
const { name, value } = target;
this.setState({ [name]: value });
};
submit = (event) => {
event.preventDefault();
const payload = {
name: this.state.name,
address: this.state.address,
postcode: this.state.postcode,
phone: this.state.phone,
};
axios({
url: "/api/save",
method: "POST",
data: payload,
})
.then(() => {
console.log("Data has been sent to the server");
this.resetUserInputs();
this.getCustomerList();
})
.catch(() => {
console.log("Internal server error");
});
};
resetUserInputs = () => {
this.setState({
name: "",
address: "",
postcode: "",
phone: "",
});
};
//THIS IS CAUSING THE ISSUE
displayCustomerList = (posts) => {
if (!posts.length) return null;
console.log(posts) // I can see the array in the console
posts.map((post, index) => (
<div key={index} className="customer.list_display">
<h3>TEST</h3> //NOT DISPLAYING
<h3>{post.name}</h3>
<p>{post._id}</p>
<p>{post.address}</p>
<p>{post.postcode}</p>
<p>{post.phoneNumber}</p>
</div>
));
};
render() {
console.log("State: ", this.state);
if (this.state.loggedIn === false) {
return <Redirect to="/login" />;
}
return (
<React.Fragment>
<div className="py-5">
<div className="container">
<Title name="Admin" />
<Link to="/">Logout</Link>
</div>
</div>
<div className="card-footer d-flex justify-content-between">
<form onSubmit={this.submit} className="py-5">
<div className="form-input">
<input
type="text"
name="name"
placeholder="Name"
value={this.state.name}
onChange={this.handleChange}
className="nameInput"
/>
</div>
<div className="form-input">
<input
type="address"
name="address"
placeholder="Address"
value={this.state.address}
onChange={this.handleChange}
className="addressInput"
/>
</div>
<div className="form-input">
<input
type="text"
name="postcode"
placeholder="Postcode"
value={this.state.postcode}
onChange={this.handleChange}
className="postcodeInput"
/>
</div>
<div className="form-input">
<input
type="text"
name="phone"
placeholder="Phone number"
value={this.state.phone}
onChange={this.handleChange}
className="phoneInput"
/>
</div>
<ButtonContainer>submit</ButtonContainer>
</form>
</div>
<div>
{/* <CustomerList /> */}
<Title name="Customer List" />
</div>
//NOTHING IS BEING DISPLAYED
<div className="blog-">
{this.displayCustomerList(this.state.posts)}
</div>
</React.Fragment>
);
}
}

you should return JSX object from displayCustomerList like this:
displayCustomerList = (posts) => {
if (!posts.length) return null;
console.log(posts) // I can see the array in the console
return posts.map((post, index) => (
<div key={index} className="customer.list_display">
<h3>TEST</h3> //NOT DISPLAYING
<h3>{post.name}</h3>
<p>{post._id}</p>
<p>{post.address}</p>
<p>{post.postcode}</p>
<p>{post.phoneNumber}</p>
</div>
));
};

React Redux, Uncaught TypeError: this.props.dispatch is not a function, when trying to dispatch a form submit?

I'm not sure what is causing the problem, as I have another component that's almost identical except that the other component is stateless. I'm not sure if that makes a problem? It shouldn't right?
The following code gives me: Uncaught TypeError: this.props.dispatch is not a function at Signup.handleRegister, when trying to submit the form.
import React from 'react';
import { connect } from 'react-redux';
import { registerUser } from '../../actions/index';
export class Signup extends React.Component {
constructor(props){
super(props);
this.state = {
displayname: "",
username: "",
password: ""
}
}
handleRegister = e => {
e.preventDefault();
console.log('triggered handle register'); //logs: 'triggered handle register'
console.log(this.state); //logs: {displayname: "", username: "", password: ""}, as intended with empty inputs
console.log(this.props); //logs: {}
this.props.dispatch(registerUser(this.state));
}
render(){
return (
<div className="form-container sign-up-container">
<form className="sign-up-form" onSubmit={this.handleRegister}>
<h2>Create Account</h2>
<input type="text" placeholder="Display Name" onChange={e => this.setState({ displayname: e.target.value })} />
<input type="text" placeholder="Username" onChange={e => this.setState({ username: e.target.value })} />
<input type="password" placeholder="Password" onChange={e => this.setState({ password: e.target.value })} />
<button className="toggle-btn">Sign Up</button>
</form>
</div>
);
}
}
const mapStateToProps = state => ({});
export default connect(mapStateToProps)(Signup);
Update: Something like this?
const mapDispatchToProps = dispatch => {
return {
//the redux-action here instead of the handleRegister?
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Signup);
Update 2: Following Christopher Ngo suggestion
import React from 'react';
import { connect } from 'react-redux';
import { registerUser } from '../../actions/index';
export class Signup extends React.Component {
constructor(props) {
super(props);
this.state = {
displayname: "",
username: "",
password: ""
}
}
handleRegister = e => {
e.preventDefault();
console.log('triggered handle register'); //logs: 'triggered handle register'
console.log(this.state); //logs: {displayname: "", username: "", password: ""}, as intended with empty inputs
console.log(this);
//logs: Signup {props: {…}, context{…}, refs: {…}, updater: {…}, handleRegister: ƒ, …}
this.props.registerUser(this.state);
}
render() {
return (
<div className="form-container sign-up-container">
<form className="sign-up-form" onSubmit={this.handleRegister}>
<h2>Create Account</h2>
<input type="text" placeholder="Display Name" onChange={e => this.setState({ displayname: e.target.value })} />
<input type="text" placeholder="Username" onChange={e => this.setState({ username: e.target.value })} />
<input type="password" placeholder="Password" onChange={e => this.setState({ password: e.target.value })} />
<button className="toggle-btn">Sign Up</button>
</form>
</div>
);
}
}
// const mapStateToProps = state => ({});
const mapDispatchToProps = (dispatch) => {
return {
registerUser: (userInfo) => {
dispatch(registerUser(userInfo))
}
}
}
export default connect(null, mapDispatchToProps)(Signup);
I changed the console log in the handle register to check this and it looks like the Signup component still does not have props or dispatch available to it.

Your connected component is exported as a default export so you need to make sure that you are importing Signup as a default import in your other files and not a named export. In such scenarios its better to not export unconnected components to avoid such mistakes.
Import your signup component like
import Signup from 'path/to/Signup'

Try it like this:
import React from 'react';
import { connect } from 'react-redux';
import { registerUser } from '../../actions/index';
class Signup extends React.Component {
constructor(props){
super(props);
this.state = {
displayname: "",
username: "",
password: ""
}
}
handleRegister = e => {
e.preventDefault();
console.log('triggered handle register'); //logs: 'triggered handle register'
console.log(this.state); //logs: {displayname: "", username: "", password: ""}, as intended with empty inputs
console.log(this.props); //logs: {}
this.props.registerUser(this.state);
}
render(){
return (
<div className="form-container sign-up-container">
<form className="sign-up-form" onSubmit={this.handleRegister}>
<h2>Create Account</h2>
<input type="text" placeholder="Display Name" onChange={e => this.setState({ displayname: e.target.value })} />
<input type="text" placeholder="Username" onChange={e => this.setState({ username: e.target.value })} />
<input type="password" placeholder="Password" onChange={e => this.setState({ password: e.target.value })} />
<button className="toggle-btn">Sign Up</button>
</form>
</div>
);
}
}
const mapStateToProps = state => ({});
const mapDispatchToProps = (dispatch) => {
return{
registerUser: (userInfo) => {
dispatch(registerUser(userInfo))
}
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Signup);

How to pass mutation variables to render function?

I have the following child component:
class SignIn extends React.Component {
constructor(props) {
super(props);
this.onClick = this.handleClick.bind(this);
this.state = {
email: '',
password: ''
};
}
handleClick = () => {
this.props.onClick(this.state.email, this.state.password);
}
handleEmailChange = (e) => {
this.setState({email: e.target.value});
}
handlePasswordChange = (e) => {
this.setState({password: e.target.value});
}
render() {
return (
...
<Input id="email" name="email" autoComplete="email" autoFocus
value={this.state.email} onChange={this.handleEmailChange}/>
<Input name="password" type="password" id="password" autoComplete="current-password"
value={this.state.password} onChange={this.handlePasswordChange}/>
...
);
}
}
Now from the parent I have the following component:
class App extends Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
this.state = {
email: "",
password: ""
}
}
handleClick(e, p, request) {
request();
}
render() {
const { email, password } = this.state;
console.log('render', email, password); // here I see the right state after click
return (
<ApolloProvider client={client}>
<Mutation mutation={LOGIN} variables={{ email: email, password: password }} onError={() => {}}>
{(request, result) => {
const { data, loading, error, called } = result;
if(!called) {
return <SignIn onClick={(e, p) => this.handleClick(e, p, request)} />;
}
if(error) {
return <div>Error</div>;
}
if(loading) {
return <div>Loading...</div>;
}
...
return <div>Mutation processed</div>;
}}
</Mutation>
</ApolloProvider>
);
}
}
What I wanted to achieve is separate handler after button click and initiate mutation send after some logic. However, this way variables(email, password) are always sent empty to the network. If I put request directly into handle, then it works.
How can I have a handler outside of render function to initiate mutation request with correct variable values? I would also very much like to know why this construction doesn't work and variables are empty.

I think the problem here lies with the line:
this.onClick = this.handleClick.bind(this);
With incorrect binding you're not going to trigger the method you want. This should be:
this.handleClick = this.handleClick.bind(this);
The following achieves what you want. I've slimmed it down because I don't know anything about your Apollo implementation, but hopefully you'll get the gist:
// SignIn.jsx
import React, { Component } from "react";
class SignIn extends Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
this.state = {
email: "",
password: ""
};
}
handleClick = () => {
this.props.onClick(this.state.email, this.state.password);
};
handleEmailChange = e => {
this.setState({ email: e.target.value });
};
handlePasswordChange = e => {
this.setState({ password: e.target.value });
};
render() {
return (
<div>
<input
id="email"
name="email"
autoComplete="email"
autoFocus
value={this.state.email}
onChange={this.handleEmailChange}
/>
<input
name="password"
type="password"
id="password"
autoComplete="current-password"
value={this.state.password}
onChange={this.handlePasswordChange}
/>
<button onClick={this.handleClick}>Click Me</button>
</div>
);
}
}
export default SignIn;
// App.jsx
import React, { Component } from "react";
import ReactDOM from "react-dom";
import SignIn from "./SignIn";
class App extends Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
this.state = {
email: "",
password: ""
};
}
handleClick(e, p, request) {
console.log("Requesting: ", request);
}
render() {
const { email, password } = this.state;
const request = "Your Apollo Request";
console.log("render", email, password); // here I see the right state after click
return (
<div>
<SignIn onClick={(e, p) => this.handleClick(e, p, request)} />;
</div>
);
}
}
export default App;

React onchange event: this.setState() not setting state?

I am trying to set state via this.setState() of username and password when user types a value in username and password field. I am using onChange event type
ISSUE: the state is not changing. I log this.state.data.username in the render().
import React, { Component } from "react";
import { Form, Button } from "react-bootstrap";
import { Link } from "react-router-dom";
var Joi = require("joi-browser");
class Login extends Component {
state = {
data: { username: "a", password: "b " },
errors: {
email: "ddsfds",
password: "aaaa"
}
};
schema = {
username: Joi.string()
.min(0)
.required()
.label("Username"),
password: Joi.string()
.required()
.label("Password")
};
handleSubmit = event => {
event.preventDefault();
console.log("submited.", event.target);
const { data } = this.state;
const { err } = Joi.validate(data, this.schema);
if (err) {
console.log("error is true", err);
} else {
console.log("not true");
}
};
handleEmailOnChange = event => {
const inputUsername = event.target.value;
console.log("input is...", inputUsername);
this.setState({ username: inputUsername });
};
handlePassword = event => {
const passwordInput = event.target.value;
this.setState({ password: passwordInput });
};
render() {
console.log("username ", this.state.data.username);
return (
<div id="form-wrapper">
<Form>
<Form.Group controlId="formBasicEmail">
<h4>Sign In</h4>
<Form.Control
type="email"
placeholder="Enter email"
onChange={this.handleEmailOnChange}
/>
{/* <span>{this.state.errors.username} </span> */}
</Form.Group>
<Form.Group controlId="formBasicPassword">
<Form.Control
type="password"
placeholder="Password"
onChange={this.handlePassword}
/>
</Form.Group>
<div id="register-wrapper">
<Link to="/register" type="button" className="btn btn-warning">
Register Account
</Link>
<Button
variant="primary"
className="m-2"
type="submit"
onClick={this.handleSubmit}
>
Submit
</Button>
</div>
</Form>
</div>
);
}
}
export default Login;

You aren't updating the state correctly or not using it correctly. The state in your constructor has data object with username and password
handleEmailOnChange = event => {
const inputUsername = event.target.value;
console.log("input is...", inputUsername);
this.setState(prev => ({data: {...prev.data, username: inputUsername } }));
};
handlePassword = event => {
const passwordInput = event.target.value;
this.setState(prev => ({data: {...prev.data, password: passwordInput } }));
};

The state you are changing is this.state.username, the one you console is this.state.data.username.
To set data in your state, use:
this.setState(prevState => ({
data: {
username: inputUsername,
...prevState.data
}
})