Develop Reference

Changing the state from reusable component

i'm trying to to add data to the main App through an reusable component, the problem is that when i use setState, nothing is happening.
In the main app, i m calling the BookModal and passing the
state:
state= {
books: [
{id: uuidv4(),name: 'The Kingkiller Chronicle', isbm:'5435-54',quantity: '4', price:'14.99', isBorrowed: false, remainingDays: 14},
{id: uuidv4(),name: 'Jane Eyre', isbm:'643543-21',quantity: '2', price:'19.99', isBorrowed: false, remainingDays: -3}
],
newBookModal: false,
editBookModal: false,
newBookData: {
id: '',
name: '',
isbm: '',
quantity:'',
price: '',
isBorrowed: false,
remainingDays: 14
},
editBookData: {
id: '',
name: '',
isbm: '',
quantity:'',
price: ''
}
}
And here i render the component:
<BookModal booksData={this.state}/>
In the modal:
import { Component } from 'react';
import React from 'react';
import {
Button,
Modal,
ModalHeader,
ModalBody,
FormGroup,
Label,
Input,
ModalFooter
} from 'reactstrap';
import { v4 as uuidv4 } from 'uuid';
class BookModal extends React.Component {
constructor(props) {
super(props);
this.state = {
newBookData: {
id: '',
name: '',
isbm: '',
quantity:'',
price: '',
isBorrowed: false,
remainingDays: 14
},
newBookModal: false,
}
this.openNewBookModal = this.openNewBookModal.bind(this);
this.addBook = this.addBook.bind(this)
}
async openNewBookModal () {
console.log(this.state.newBookModal);
this.setState({
newBookModal: !this.props.booksData.newBookModal//the opposite of the state
});
};
addBook () {
let { books } = this.props.booksData;
books.push(this.props.booksData.newBookData);
await this.setState({ books, newBookModal: false, newBookData: {
id: uuidv4(),
name: '',
isbm: '',
quantity:'',
price: '',
isBorrowed: false
}});
}
render() {
return(
<Modal isOpen={this.props.booksData.newBookModal} toggle={this.openNewBookModal}>
<ModalHeader toggle={this.openNewBookModal}>Add a new book</ModalHeader>
<ModalBody>
<FormGroup>
<Label for="title">Title</Label>
<Input id="title" value={this.props.booksData.newBookData.name} onChange={(e) => {
let { newBookData } = this.props.booksData;
newBookData.name = e.target.value;
this.setState({ newBookData });
}} />
</FormGroup>
<FormGroup>
<Label for="isbm">ISBM</Label>
<Input id="isbm" value={this.props.booksData.newBookData.isbm} onChange={(e) => {
let { newBookData } = this.props.booksData;
if (e.target.value === '' || e.target.value.match(/^\d{1,}(\-\d{0,2})?$/)) {
newBookData.isbm = e.target.value;
}
this.setState({ newBookData });
}} />
</FormGroup>
<FormGroup>
<Label for="quantity">Quantity</Label>
<Input id="quantity" value={this.props.booksData.newBookData.quantity} onChange={(e) => {
let { newBookData } = this.props.booksData;
if (e.target.value === '' || e.target.value.match(/^\d{1,9}?$/)) {
newBookData.quantity = e.target.value;
}
this.setState({ newBookData });
}} />
</FormGroup>
<FormGroup>
<Label for="price">Price</Label>
<Input id="price" value={this.props.booksData.newBookData.price} onChange={(e) => {
let { newBookData } = this.props.booksData;
if (e.target.value === '' || e.target.value.match(/^\d{1,}(\.\d{0,2})?$/)) {
newBookData.price = e.target.value;
}
this.setState({ newBookData });
}} />
</FormGroup>
</ModalBody>
<ModalFooter>
<Button color="primary" onClick={this.addBook}>Add Book</Button>{' '}
<Button color="secondary" onClick={this.openNewBookModal}>Cancel</Button>
</ModalFooter>
</Modal>
)
}
}
export default BookModal;
The problem seems to be in addBook, because it is not aware of the state from the main App component, how can i make this work, so i can enter the books.

This code has some problems, but I think the main one is conceptual. One of the things that React encourages you to do is to find the least amount of state possible.
In your app, the App component appears to handle the application's state. It tracks the data that you'll need to display in various ways, namely the list of books. Then, as you should, you pass this data, as props, down to a child component that will handle displaying this data, in this case a modal.
Where you go wrong is what you do next. The <BookModal /> component should only care about displaying the props it's given, and yet you spend a lot of code basically storing the props in BookModal's state. Why? BookModal has everything it needs in the props it was passed.
"But," you'll say, "the modal has a form that the user will use to add a new book. How will the child component, BookModal, pass that data to the parent, App?" The answer is that it won't! App tracks the state, so App should expose a function to its children that can add a book to the state. How do you get this to the child? Pass it as a prop! The only state BookModal needs is that which will allow it to control the form components.
class App extends React.Component {
constructor(props) {
super(props);
this.state = {books: []};
}
addBook(bookToAdd) {
// instead of using push, which mutates the state (generally a bad idea), we'll make a copy of the state books array using the ES6 spread operator and add the new book
this.setState({ books: [...this.state.books, bookToAdd ] });
}
render() {
return (
{/* you don't even really need to pass the app state down to this component if all it does is render a form, but we'll leave it for now */}
<BookModal data={this.state} addBook={this.addBook} />
);
}
}
class BookModal extends React.Component {
constructor(props) {
super(props);
this.state = {
title: '',
isbn: '',
quantity: '0',
price: '0',
}
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit() {
// call the function we have been passed as a prop with the new book and let the App component handle the change in our application state
const bookToAdd = {
title: this.state.title,
isbn: this.state.isbn,
quantity: this.state.quantity,
price: this.state.price,
}
this.props.addBook(bookToAdd);
}
render() {
return (
<Modal>
<FormGroup>
<Label for="title">Title</Label>
<Input id="title" value={this.state.title} onChange={(e) => this.setState({title: e.target.value})} />
</FormGroup>
<FormGroup>
<Label for="isbn">ISBN</Label>
<Input id="isbn" value={this.state.isbn} onChange={(e) => this.setState({isbn: e.target.value})}/>
</FormGroup>
<FormGroup>
<Label for="quantity">Quantity</Label>
<Input id="quantity" value={this.state.quantity} onChange={(e) => this.setState({quantity: e.target.value})}/>
</FormGroup>
<FormGroup>
<Label for="isbn">Price</Label>
<Input id="price" value={this.state.price} onChange={(e) => this.setState({isbn: e.target.value})}/>
</FormGroup>
<Button color="primary" onClick={this.handleSubmit}>Add Book</Button>
</Modal>
);
}
}
EDIT: I haven't worked with class components in a while, so apologies if there are minor errors here (can't believe we used to bind!). Hopefully, my main point gets across.

Parent Component losing state immediately after re render Reactjs

I'm very new to React and I'm trying to write an app that will automatically display a Login page on startup, and when the user successfully logs in the parent component updates its state to render the Dashboard component instead of Login.
What I am finding is that when the user logs in, it updates the parent components state correctly and displays the Dashboard component for a second but then its state changes again and re-renders the Login component. I think something is causing the state to reset, but I'm not sure what.
User.js:
class User extends Component {
constructor(props) {
super(props);
this.state = {
email: '',
isLoggedIn: false
}
this.updateUser = this.updateUser.bind(this);
}
updateUser(newEmail) {
console.log(`Entered User.updateUser, email: ${newEmail}`);
this.setState({
email: newEmail,
isLoggedIn: false
});
}
render() {
if (this.state.isLoggedIn) {
return <Dashboard/>
}
return <Login updateTheUser={this.updateUser}/>
}
}
export default User;
Login.js:
class Login extends Component {
constructor(props) {
super(props);
this.state = {
email: '',
password: '',
};
this.handleEmailChange = this.handleEmailChange.bind(this);
this.handlePasswordChange = this.handlePasswordChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.handleResponse = this.handleResponse.bind(this);
}
handleEmailChange(event) {
this.setState({email: event.target.value})
}
handlePasswordChange(event) {
this.setState({password: event.target.value})
}
handleResponse(res) {
if (res.ok) {
alert('Login Successful!');
this.props.updateTheUser(this.state.email);
}
else if (res.status === 401) {
alert('Wrong Username or Password');
}
}
async sendLoginRequest(data) {
await fetch('http://localhost:8000/login/', {
method: 'POST',
headers: { 'Content-Type': 'application/json'},
body: data,
})
.then(this.handleResponse)
.catch(function(error) {
alert('Server error, please try again.');
console.error(error);
});
}
handleSubmit(event) {
const data = `{"email": "${this.state.email}", "password": "${this.state.password}"}`
this.sendLoginRequest(data);
}
render () {
return (
<div id="container" className="col-md-12" align="center">
<div id="vertical-center-div"className="col-sm-4 card bg-light">
<Form onSubmit={this.handleSubmit}>
<Form.Label className="display-4 text-secondary">Login</Form.Label>
<Form.Group controlId="formBasicEmail">
<Form.Control type="email" value={this.state.email} onChange={this.handleEmailChange} placeholder="Email" required/>
</Form.Group>
<Form.Group controlId="formBasicPassword">
<Form.Control type="password" value={this.state.password} onChange={this.handlePasswordChange} placeholder="Password" required/>
</Form.Group>
<Form.Group controlId="formBasicCheckbox">
<Form.Check type="checkbox" label="Remember me" />
</Form.Group>
<Button id="submitButton" variant="primary" type="submit">
Submit
</Button>
</Form>
</div>
</div>
)
}
}
export default Login;
Dashboard.js:
class Dashboard extends Component {
constructor(props) {
super(props);
this.state = {
expenses: [],
incomings: []
}
}
render () {
return (
<>
<p className="display-4">Dashboard</p>
</>
)
}
}
export default Dashboard;

It seems, that in Login.js you need to prevent default submit behaviour with event.preventDefault()
handleSubmit(event) {
event.preventDefault()
const data = `{"email": "${this.state.email}", "password": "${this.state.password}"}`
this.sendLoginRequest(data);
}

ReactJS API authentication : Cannot update during an existing state transition

I am building an app with ReactJS that authenticate users through a Laravel API.
This is a very simple app. And the authentication part is working well. But after authentication when I try to change the state I am getting this error.
Cannot update during an existing state transition
The App I am trying to build is a very simple one. After the app makes an API call to authenticate the user, it must get the user's data from the API response and pass those responses to the component set for logged in users.
I made some search on the error Cannot update during an existing state transition. All the answers I am getting are telling me not to setState inside of a render. I am not doing that.
Here is my code
App.jsx
//...
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
isLoggedIn: false,
user: {}
};
}
_loginUser = (email, password) => {
var formData = new FormData();
formData.append("email", email);
formData.append("password", password);
axios
.post("http://localhost:8000/api/user/login", formData)
.then(response => {
console.log(response);
return response;
})
.then(json => {
if (json.data.success) {
let userData = {
first_name: json.data.data.first_name,
name: json.data.data.name,
id: json.data.data.email,
email: json.data.data.email,
auth_token: json.data.data.auth_token,
timestamp: new Date().toString()
};
let appState = {
isLoggedIn: true,
user: userData
};
//Save app state with user date in local storage
localStorage["appState"] = JSON.stringify(appState);
this.setState({
isLoggedIn: appState.isLoggedIn,
user: appState.user
});
} else {
$("#feedbacks").html(
`<span className="alert alert-danger">Login Failed: ${
json.data.data
}</span>`
);
}
$("#email-login-btn")
.removeAttr("disabled")
.html("Login");
})
.catch(error => {
$("#feedbacks").html(
`<span className="alert alert-danger">An Error Occured</span>`
);
$("#email-login-btn")
.removeAttr("disabled")
.html("Login");
});
};
componentDidMount() {
let state = localStorage["appState"];
if (state) {
let AppState = JSON.parse(state);
console.log(AppState);
this.setState({
isLoggedIn: AppState.isLoggedIn,
user: AppState
});
}
}
render() {
if (
!this.state.isLoggedIn &&
this.props.location.pathname !== "/app/login"
) {
this.props.history.push("/app/login");
}
if (
this.state.isLoggedIn &&
(this.props.location.pathname === "/app/login" ||
this.props.location.pathname === "/app/register")
) {
this.props.history.push("/");
}
return (
<Switch data="data">
<Route
exact
path="/"
render={props => (
<Home
{...props}
logOut={this._logoutUser}
isLoggedIn={this.state.isLoggedIn}
user={this.state.user}
/>
)}
/>
<Route
path="/app/login"
render={props => (
<Login {...props} loginUser={this._loginUser} />
)}
/>
</Switch>
);
}
}
const AppContainer = withRouter(props => <App {...props} />);
render(
<BrowserRouter>
<AppContainer />
</BrowserRouter>,
document.getElementById("root")
);
Login.jsx
const Login = ({ history, loginUser = f => f }) => {
console.log(history);
let _email, _password;
const handleLogin = e => {
e.preventDefault();
loginUser(_email.value, _password.value);
};
return (
<div>
<div id="wrapper" className="formWrapper">
<form method="post" action="#" onSubmit={handleLogin}>
<div className="fields">
<div className="field">
<label htmlFor="email">Your Email</label>
<input
ref={input => (_email = input)}
autoComplete="off"
id="email"
name="email"
type="text"
className="center-block"
placeholder="email"
/>
</div>
<div className="field">
<label htmlFor="password">Your Password</label>
<input
ref={input => (_password = input)}
autoComplete="off"
id="password-input"
name="password"
type="password"
className="center-block"
placeholder="password"
/>
</div>
</div>
<div className="actions login">
<button
type="submit"
className="primary"
id="email-login-btn"
>
<span className="icon fa-user" /> Login
</button>
</div>
</form>
</div>
<div id="blur" />
<div id="bg" />
</div>
);
};
export default Login;
The _login method handles the form submit. And within that method, I setState the user once authentication is valid. Apparently, that is where the error is coming from. That generates the error :
Warning: Cannot update during an existing state transition (such as within render). Render methods should be a pure function of props and state.
So I need to know where is the right place to change the value of the state 'user'.
Can someone help, please?

How to bind the elements to the modal in React?

I am using rendering elements from dynamodb using serverless and showing in a card dashboard and when i am editing the card i want to see the contents that are already present in the card .
Edit.js
import React, { Component } from "react";
import { Form, Modal, Button, Container, Icon } from "semantic-ui-react";
import Amplify, { API } from "aws-amplify";
const uuidv1 = require("uuid/v1");
class EditItemModal extends Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.deleteItem = this.deleteItem.bind(this);
this.state = { item: this.props.item };
}
deleteItem() {
let apiName = "ServerlessReactExampleCRUD";
let path = "/ServerlessReactExample/object/" + this.props.item[0].ID;
API.del(apiName, path)
.then(response => {
console.log(response);
})
.catch(error => {
console.log(error.response);
});
this.props.getItems();
this.handleClose();
}
handleChange(event, { name, value }) {
this.setState({ [name]: value });
}
handleSubmit(event) {
let apiName = "ServerlessReactExampleCRUD";
let path = "/ServerlessReactExample";
let editItem = {
body: {
ID: this.props.item[0].ID,
name: this.state.name,
price: this.state.price,
description: this.state.description
}
};
API.put(apiName, path, editItem)
.then(response => {
console.log(response);
})
.catch(error => {
console.log(error.response);
});
this.props.getItems();
this.handleClose();
event.preventDefault();
}
handleOpen = () => this.setState({ modalOpen: true });
handleClose = () => this.setState({ modalOpen: false });
render() {
return (
<Container style={{ padding: 10 }}>
<Modal
trigger={
<Button icon onClick={this.handleOpen}>
<Icon name="edit" />
</Button>
}
open={this.state.modalOpen}
closeIcon
onClose={this.handleClose}
>
<Modal.Header>Edit</Modal.Header>
<Modal.Content>
<Form onSubmit={this.handleSubmit}>
<Form.Group unstackable widths={2}>
<Form.Input
name="name"
label="Item Name"
placeholder="Edit Item Name..."
onChange={this.handleChange}
value={this.state.name}
/>
<Form.Input
name="price"
label="Item Price"
placeholder="£0.00"
onChange={this.handleChange}
value={this.state.price}
/>
</Form.Group>
<Form.TextArea
name="description"
label="Item Description"
placeholder="Edit Description of the Item..."
onChange={this.handleChange}
value={this.state.description}
/>
<Form.Button type="submit">Submit</Form.Button>
</Form>
</Modal.Content>
<Modal.Actions>
<Button icon labelPosition="left" onClick={this.deleteItem}>
<Icon name="delete" />
Delete Item
</Button>
</Modal.Actions>
</Modal>
</Container>
);
}
}
export default EditItemModal;
This is how the card looks like
When i clicked on edit button it will look like this
What i want to show the values that are present in the card ? I want to know how i can bind them to show in the card ?
Any help is appreciated.
Ref : Ref links

As Simão wrote you're probably accessing wrong element
this.state = { item: this.props.item };
creates this.state.item (with your values/properties inside ?)
If you don't want to change everything probably this will fix it:
this.state = { ...this.props.item };
I would move operations into parent to keep all (CRUD) in one place. Updating/deleting item on list in handlers could avoid unnecessary list reloading (getItems) and done before api call would work as optimistic update.

How to render a form with Users information ( React + Redux )

I've managed to get the users information using axios request. I've also managed to render users info on a view using a component that i created. My problem is that i cant display it on an another component i have created which is called ProfileForm. ProfileForm is used as form for updating the info of the user. I want to set the state on the constractor with the user info.
Also, when i change the values to this.props.user.username etc.. i receive two errors:
Warning: Failed prop type: The prop value is marked as required in
TextFieldGroup, but its value is undefined.
in TextFieldGroup (at ProfileForm.js:112)
in ProfileForm (at ProfilePage.js:23)
and the second is
warning.js:36 Warning: TextFieldGroup is changing an uncontrolled
input of type text to be controlled. Input elements should not switch
from uncontrolled to controlled (or vice versa). Decide between using
a controlled or uncontrolled input element for the lifetime of the
component.
class ProfileForm extends React.Component
constructor(props) {
super(props);
this.state = {
username: '',
email: '',
password: '',
passwordConfirmation: '',
errors: {},
isLoading: false,
invalid: false
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({ [event.target.name]: event.target.value });
}
render() {
const { errors } = this.state;
return (
<form onSubmit={this.handleSubmit}>
<TextFieldGroup
error={errors.username}
placeholder="Username"
onChange={this.handleChange}
value={user.username} <-- Here should be the bind
field="username"
/>
<TextFieldGroup
error={errors.email}
placeholder="Email"
onChange={this.handleChange}
checkUserExists={this.checkUserExists}
value={user.email} <-- Here should be the bind
field="email"
/>
<TextFieldGroup
error={errors.password}
placeholder="Password"
onChange={this.handleChange}
value={user.password} <-- Here should be the bind
field="password"
/>
<div className="form-group">
<button disabled={this.state.isLoading || this.state.invalid} className="btn btn-primary btn-md btn-block">Update</button>
</div>
</form>
);
}
}
export default ProfileForm;
Here is my ProfilePage
class ProfilePage extends React.Component {
componentDidMount() {
this.props.getUser();
}
render() {
const { profileUpdateRequest, addFlashMessage, getUser, isUserExists } = this.props;
return (
<div className="row">
<div className="row text-center">
<UserProfile user={this.props.user} /> <-- This works!!!!
</div>
<ProfileForm
profileUpdateRequest={profileUpdateRequest}
addFlashMessage={addFlashMessage}
getUser={getUser}
user={this.props.user} <--- This doesnt work!!!!
isUserExists={isUserExists}
/>
</div>
);
}
}
and my UserProfile which works
export default function UserProfile({ user }) {
const userProfile = (
<div className="row">
{user.username} {user.email}
</div>
);
return (
<div>
{userProfile}
</div>
);
}
My ProfileUpdateAction action
export function getUser() {
return dispatch => {
return axios.get('/api/user')
.then(res => res.data)
.then(data => dispatch(setUser(data.user)));
}
}
And my reducer
import { SET_USER } from '../actions/profileUpdateActions';
export default function user(state = [], action = {}) {
switch(action.type) {
case SET_USER:
return action.user;
default: return state;
}
}
My textFieldGroup
const TextFieldGroup = ({ field, value, label, error, type, onChange, placeholder, min, checkUserExists, disabled }) => {
return (
<div className={classnames("form-group", {'has-error': error})}>
<label className="control-label">{label}</label>
<input
type={type}
name={field}
className="form-control"
value={value}
min={min}
onChange={onChange}
onBlur={checkUserExists}
placeholder={placeholder}
disabled={disabled}
/>
{error && <span className="help-block">{error}</span>}
</div>
);
}
TextFieldGroup.propTypes = {
field: React.PropTypes.string.isRequired,
value: React.PropTypes.string.isRequired,
label: React.PropTypes.string,
error: React.PropTypes.string,
min: React.PropTypes.string,
disabled: React.PropTypes.bool,
placeholder: React.PropTypes.string.isRequired,
type: React.PropTypes.string.isRequired,
onChange: React.PropTypes.func.isRequired,
checkUserExists: React.PropTypes.func
}
TextFieldGroup.defaultProps = {
type: 'text'
}
export default TextFieldGroup;

In UserProfile, you're using a stateless component that is passed in props as an argument. In the function params, you destructure user to be its own constant. Thats cool and works well.
However, in UserForm, you have a class-based component. The props object is attached to the object's context (this). So to access it, you need to use this.props.user.