We Keep Coding

Uncontrolled input React Hooks ( console error)

Warning: A component 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.
import React, { useEffect, useState } from 'react';
import axios from "axios"
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
function CreateExercise() {
const [createExercises, setExercise] = useState({
username: "",
description: "",
duration: 0,
date: new Date(),
users: []
});
useEffect(() => {
axios.get('http://localhost:5000/users/')
.then(response => {
if (response.data.length > 0) {
setExercise({
users: response.data.map(user => user.username),
username: response.data[0].username
})
}
})
}, [])
function handleChange(event) {
const { name, value } = event.target;
setExercise(prevExercise => {
return {
...prevExercise,
[name]: value
};
});
}
function changeDate(date) {
setExercise(prevExercise => {
return {
username: prevExercise.username,
description: prevExercise.description,
duration: prevExercise.duration,
date: date,
users: prevExercise.users
};
});
}
function onSubmit(event) {
event.preventDefault();
console.log(createExercises);
axios.post('http://localhost:5000/exercises/add', createExercises)
.then(res => console.log(res.data));
setExercise({
username: "",
description: "",
duration: 0,
date: new Date(),
users: []
});
window.location = '/';
}
return (
<div>
<h3>Create New Exercise log</h3>
<form >
<div>
<label>Username: </label>
<select
required
className="form-control"
value={createExercises.username}
onChange={handleChange}>
{
createExercises.users.map(function (user, index) {
return <option key={user} value={user}>{user}</option>;
})
}
</select>
</div>
<div className="form-group">
<label>Description: </label>
<input type="text"
name="description"
className="form-control"
onChange={handleChange}
value={createExercises.description}
/>
</div>
<div className="form-group">
<label>Duration (in minutes): </label>
<input type="text"
name="duration"
className="form-control"
onChange={handleChange}
value={createExercises.duration}
/>
</div>
<div className="form-group">
<label>Date: </label>
<DatePicker
selected={createExercises.date}
onChange={changeDate}
/>
</div>
<div className="form-group">
<button type="submit" className="btn btn-primary" onClick={onSubmit} >Create Exercise Log</button>
</div>
</form>
</div>
);
}
export default CreateExercise;
how can i avoid above console error occured?

I think your problem is in your effect, particularly in the way you use setExercise, when you do:
setExercise({
users: response.data.map(user => user.username),
username: response.data[0].username
})
It doesn't "merge" (assign) the new data with previous state, what it does - is just sets the state, meaning your state object after this will be:
{ users:[], username:''}
So you actually lose description and other fields - hence the warning.
What you should do, is this:
setExercise((prevState) => ({
...prevState,
users: response.data.map(user => user.username),
username: response.data[0].username
}))

Updating React Json Value Conditionally

I didn't figure out how to edit JSON data from a Put request.(it must be PUT request)
I created some inputs as you see and I need to find a way for updating/adding new credit-debit datas on JSON data differs by "to" and "from".
Also, if a "to" value added, it must decreased from total balance and if a "from" value added, it must be added to total balance.
I created a select box and an input for this (didin't connect between json and component)
My Updater component is as follows:
Component itself:
import React, { Component } from 'react';
import './Updater.scss';
import Axios from 'axios';
export default class Updater extends Component {
constructor(){
super();
this.state = {
amount: '',
description: '',
from: '',
to: '',
date: new Date()
}
}
onSubmitEdit = () => {
Axios.put('http://localhost:8080/api/balance/add',
{});
}
render() {
return (
<div className="updatercontainer">
<div className="updaterinputs">
<input className="amount" name="amount"
type="text" placeholder="Enter Amount"/>
<input className="description" name="description"
type="text" placeholder="Enter Description"/>
</div>
<div className="selectbox">
<select>
<option value="From">From</option>
<option value="To">To</option>
</select>
<input className="fromto" type="text"
name="fromto" placeholder="Enter From or To Name"/>
</div>
<div className="selectboxcontainer">
<div className="button-container">
<a href="#" onClick={this.onSubmitEdit}
className="button amount-submit">
<span></span>Update</a>
</div>
</div>
</div>
)
}
}

class Updater extends React.Component {
constructor() {
super();
this.state = {
amount: 0,
description: "",
_from: true,
_to: false,
date: new Date()
};
}
onAmountChange = e => {
this.setState({
amount: e.target.value
});
};
onDescriptionChange = e => {
this.setState({
description: e.target.value
});
};
onSelectTypeChange = e => {
console.log(e.target.value);
this.setState({
[e.target.value === "from" ? "_from" : "_to"]: true,
[e.target.value !== "from" ? "_from" : "_to"]: false
});
if(e.target.value !== "from" && (this.state.from != null || this.state.from !== "")) {
this.setState({
to: this.state.from,
from: null
});
} else if(e.target.value === "from" && (this.state.to != null || this.state.to !== "")){
this.setState({
from: this.state.to,
to: null
});
}
};
onFromToChange = (e) => {
this.setState({
[this.state._from ? "from" : "to"]: e.target.value
});
}
onSubmitEdit = () => {
Axios.put(
"https://httpbin.org/put",
{
...this.state,
},
{ headers: { "Content-Type": "application/json" } }
)
.then(response => {
// handle Response
})
.catch(err => {
// handle Error
});
};
render() {
return (
<div className="updatercontainer">
<div className="updaterinputs">
<input
onChange={this.onAmountChange}
className="amount"
name="amount"
type="text"
placeholder="Enter Amount"
/>
<input
onChange={this.onDescriptionChange}
className="description"
name="description"
type="text"
placeholder="Enter Description"
/>
</div>
<div className="selectbox">
<select onChange={this.onSelectTypeChange}>
<option value="from">From</option>
<option value="to">To</option>
</select>
<input onChange={this.onFromToChange} className="fromto" type="text"
name="fromto" placeholder="Enter From or To Name"/>
</div>
<div className="selectboxcontainer">
<div onClick={this.onSubmitEdit} className="button-container">
<a href="#" className="button amount-submit">
<span>Update</span>
</a>
</div>
</div>
</div>
);
}
}
Consider Reading More About Handling Inputs, Forms, Events
Working Sandbox!

you just need an onChange event to update the state based on the input values name
handleChange = (e) => {
this.setState({ [e.target.name]: e.target.value })
}
//On your inputs
<input
className="amount"
name="amount"
type="text"
placeholder="Enter Amount"
value={this.state.amount}
onChange={() => this.handleChange(e)}
/>

Performing state and array manipulation more than once by passing props only once

I am new to React and this thing is confusing me a lot. I have root component that has an array and I am passing functions ADD and DELETE as props to the child component ui_forms. In the child component, I am taking input parameters and pushing or deleting from array depending on the button pressed. However, I cannot seem to perform push/delete operation more than once because I guess I am injecting the child component only once in the root component.
Is there by any chance a way to perform push or delete as many times a user wants by sending props only once?
Thank you
App.js
import FormsMap from './form_map';
class App extends Component {
state = {
maps : [
{'regno' : 'Karan', 'id' : 1},
{regno : 'Sahil', 'id' : 2},
{'regno' : 'Rahul', id : 4},
{regno : 'Mohit', id : 5},
{regno : 'Kartik', id : 3}
]
};
function_as_props(list1) {
console.log(this.state.maps);
let ninja = [...this.state.maps];
console.log(ninja);
ninja.push({"regno" : list1, "id" : Math.random()*10});
this.setState({
maps : ninja
});
console.log(ninja);
function_as_props1(name) {
let t = this.state.maps.indexOf(name);
let x = this.state.maps.splice(t,1);
console.log(x);
this.setState({
maps : x
});
console.log(this.state.maps);
}
}
render() {
const p = this.state.maps.map(list => {
return(
<div key={list.id}> {list.regno} </div>
);
})
return(
<FormsMap transpose = {this.function_as_props.bind(this)} traverse ={this.function_as_props1.bind(this)} /> <br />
);
}
}
export default app;
form_map.js
import React, { Component } from 'react';
class FormsMap extends Component {
state = {
name : null,
age : null,
hobby : null
};
changes(e) {
this.setState({
[e.target.id] : e.target.value
});
}
handle = (e) => {
e.preventDefault();
console.log(this.state);
this.props.transpose(this.state.name);
}
dels = (e) => {
this.setState({
[e.target.id] : e.target.value
});
}
del_button(e) {
e.preventDefault();
//console.log(this.state.name);
this.props.traverse(this.state.name);
}
render() {
return(
<React.Fragment>
<form onSubmit={this.handle}> {/* After entering all info, Press Enter*/}
<label htmlFor="labels"> Name : </label>
<input type="text" id="name" placeholder="Your name goes here..." onChange={this.changes.bind(this)} />
<label htmlFor="labels"> Age : </label>
<input type="text" id="age" placeholder="Your age goes here..." onChange={this.changes.bind(this)} />
<label htmlFor="labels"> Hobby : </label>
<input type="text" id="hobby" placeholder="Your hobby goes here..." onChange={this.changes.bind(this)} /> <br /><br />
<input type="submit" value="SUBMIT" /><br /><br />
</form>
<input type="text" id="name" placeholder="Enter name to delete..." onChange={this.dels} /> <button onClick={this.del_button.bind(this)}> DELETE </button>
</React.Fragment>
);
}
}
export default FormsMap;

Try this
App.js
import React, { Component } from "react";
import FormsMap from "./components/FormsMap";
class App extends Component {
constructor(props) {
super(props);
this.state = {
maps: [
{ regno: "Karan", id: 1 },
{ regno: "Sahil", id: 2 },
{ regno: "Rahul", id: 4 },
{ regno: "Mohit", id: 5 },
{ regno: "Kartik", id: 3 }
]
};
}
function_as_props(list1) {
let ninja = this.state.maps.concat({
regno: list1,
id: Math.random() * 10
});
this.setState({ maps: ninja });
}
function_as_props1(name) {
let x = this.state.maps.filter(
list => list.regno.toLocaleLowerCase() !== name.toLocaleLowerCase()
);
this.setState({
maps: x
});
}
render() {
return (
<React.Fragment>
{this.state.maps.map(list => <div key={list.id}>{list.regno}</div>)}
<FormsMap
transpose={this.function_as_props.bind(this)}
traverse={this.function_as_props1.bind(this)}
/>
</React.Fragment>
);
}
}
export default App;
FormsMap.js
import React, { Component } from "react";
class FormsMap extends Component {
state = {
name: null,
age: null,
hobby: null
};
changes(e) {
this.setState({
[e.target.id]: e.target.value
});
}
handle = e => {
e.preventDefault();
this.props.transpose(this.state.name);
};
dels = e => {
this.setState({
[e.target.id]: e.target.value
});
};
del_button(e) {
e.preventDefault();
this.props.traverse(this.state.name);
}
render() {
return (
<React.Fragment>
<form onSubmit={this.handle}>
{" "}
{/* After entering all info, Press Enter*/}
<label htmlFor="labels"> Name : </label>
<input
type="text"
id="name"
placeholder="Your name goes here..."
onChange={this.changes.bind(this)}
/>
<label htmlFor="labels"> Age : </label>
<input
type="text"
id="age"
placeholder="Your age goes here..."
onChange={this.changes.bind(this)}
/>
<label htmlFor="labels"> Hobby : </label>
<input
type="text"
id="hobby"
placeholder="Your hobby goes here..."
onChange={this.changes.bind(this)}
/>{" "}
<br />
<br />
<input type="submit" value="SUBMIT" />
<br />
<br />
</form>
<input
type="text"
id="name"
placeholder="Enter name to delete..."
onChange={this.dels}
/>{" "}
<button onClick={this.del_button.bind(this)}> DELETE </button>
</React.Fragment>
);
}
}
export default FormsMap;
This is the demo: https://codesandbox.io/s/xl97xm6zpo

Reactjs to firebase db: Trouble adding multiple children to firebase db

So I was following a simple react/firebase chat room on youtube: https://www.youtube.com/watch?v=or3Gp29o6fE as a reference to what I'm doing with my project. I am making a bug/issue tracker, so that a user can enter a station #, bug/issue, then a description of it. I keep getting an error:
Error: Reference.set failed: First argument contains undefined in property 'bugs.0.station'
And I'm not sure how it's undefined if it's just an id number. My end goal at this point in time is to be able to add and remove a bug/issue by id.
import React, { Component } from 'react';
import { Button } from "react-bootstrap";
import withAuthorization from './withAuthorization';
import * as firebase from 'firebase';
class HomePage extends Component {
constructor(props,context) {
super(props,context);
this.stationBug = this.stationBug.bind(this)
this.issueBug = this.issueBug.bind(this)
this.descBug = this.descBug.bind(this)
this.submitBug = this.submitBug.bind(this)
this.state = {
station: '',
bug: '',
desc: '',
bugs: []
}
}
componentDidMount() {
firebase.database().ref('bugs/').on ('value', (snapshot) => {
const currentBugs = snapshot.val()
if (currentBugs != null) {
this.setState({
bugs: currentBugs
})
}
})
}
stationBug(event) {
this.setState({
station: event.target.value
});
}
issueBug(event) {
this.setState({
bug: event.target.value
});
}
descBug(event) {
this.setState({
desc: event.target.value
});
}
submitBug(event) {
const nextBug = {
id: this.state.bugs.length,
station: this.state.title,
bug: this.state.bug,
desc: this.state.desc
}
firebase.database().ref('bugs/'+nextBug.id).set(nextBug)
}
render() {
return (
<div className="App">
{
this.state.bugs.map((bug, i) => {
return (
<li key={bug.id}>{bug.station}</li>
)
})
}
<input onChange={this.stationBug} type="text" placeholder="Station #" />
<br />
<textarea onChange={this.issueBug} type="text" placeholder="Bug/Issue" />
<br />
<textarea onChange={this.descBug} type="text" placeholder="Bug Description" />
<br />
<Button onClick={this.submitBug} type="button"> Enter Bug </Button>
</div>
);
}
}
export default withAuthorization()(HomePage);

Just looks like a typo. You're referencing this.state.title instead of this.state.station in your submitBug method.
class HomePage extends Component {
constructor(props) {
super(props);
this.state = {
station: '',
bug: '',
desc: '',
bugs: []
}
}
componentDidMount() {
firebase.database().ref('bugs/').on ('value', (snapshot) => {
const currentBugs = snapshot.val()
if (currentBugs != null) {
this.setState({
bugs: currentBugs
})
}
})
}
stationBug=(event)=>{
this.setState({
station: event.target.value
});
}
issueBug=(event)=>{
this.setState({
bug: event.target.value
});
}
descBug=(event)=>{
this.setState({
desc: event.target.value
});
}
submitBug=(event)=>{
const nextBug = {
id: this.state.bugs.length,
station: this.state.title,
bug: this.state.bug,
desc: this.state.desc
}
firebase.database().ref('bugs/'+nextBug.id).set(nextBug)
}
render() {
return (
<div className="App">
{this.state.bugs.map(bug => <li key={bug.id}>{bug.station}</li>)}
<input onChange={this.stationBug} type="text" placeholder="Station #" />
<br />
<textarea onChange={this.issueBug} type="text" placeholder="Bug/Issue" />
<br />
<textarea onChange={this.descBug} type="text" placeholder="Bug Description" />
<br />
<Button onClick={this.submitBug} type="button"> Enter Bug </Button>
</div>
);
}
}
export default withAuthorization()(HomePage);

The error is quite explicit:
Reference.set failed: First argument contains undefined in property 'bugs.0.station'
Since there's only one call to Reference.set() in your code, the problem must be here:
submitBug(event) {
const nextBug = {
id: this.state.bugs.length,
station: this.state.title,
bug: this.state.bug,
desc: this.state.desc
}
firebase.database().ref('bugs/'+nextBug.id).set(nextBug)
}
So it seems that this.state.title is undefined. Most likely you wanted to use station: this.state.station.

Updates nested value in React State

I am using React/Redux for my web-app and I have the Description Class where user can edit description. Props description and propertyTypes are coming from AJAX calls.
import React, { PropTypes } from 'react';
const defaultDescription = {
about_you: '',
benefits: '',
description: '',
headline: '',
no_of_guests: 0,
property_name: '',
property_type: {
id: 1,
name: 'Apartment',
},
};
class Description extends React.Component {
static propTypes = {
description: PropTypes.object,
propertyTypes: PropTypes.array,
};
constructor(props) {
super(props);
this.state = {
description: defaultDescription,
};
this.handleInputChange = this.handleInputChange.bind(this);
this.propertyTypeChanged = this.propertyTypeChanged.bind(this);
this.updateDescription = this.updateDescription.bind(this);
}
// componentWillMount() {
// if (!this.props.description) {
// this.setState({
// description: defaultDescription,
// });
// }
// }
componentWillReceiveProps(nextProps) {
if (nextProps && nextProps.description && nextProps.propertyTypes) {
const newDescription = nextProps.description.description ? merge(defaultDescription, nextProps.description) : merge(nextProps.description, defaultDescription);
this.setState({
description: newDescription,
});
}
}
handleInputChange(event) {
const target = event.target;
const value = target.type === 'checkbox' ? target.checked : target.value;
const name = target.name;
this.setState({
description[name]: value // <---- I want to update my state here
});
}
updateDescription(event) {
event.preventDefault();
console.log(this.state);
}
render() {
return (
<form name="descriptionForm" onSubmit={this.updateDescription}>
<input name="no_of_guests" value={this.state.description.no_of_guests} onChange={this.handleInputChange} /><br />
<input name="property_name" value={this.state.description.property_name} floatingLabelText="Property Name" onChange={this.handleInputChange} /><br />
<input name="headline" value={this.state.description.headline} floatingLabelText="Headline" onChange={this.handleInputChange} /><br />
<input name="summary" value={this.state.description.summary} floatingLabelText="Summary" onChange={this.handleInputChange} /><br />
<input name="description" value={this.state.description.description} floatingLabelText="Description" onChange={this.handleInputChange} /><br />
<input name="about_you" value={this.state.description.about_you} floatingLabelText="About You" onChange={this.handleInputChange} /><br />
<input name="why" value={this.state.description.why} floatingLabelText="Why ?" onChange={this.handleInputChange} /><br />
<input name="benefits" value={this.state.description.benefits} floatingLabelText="Benefits" onChange={this.handleInputChange} /><br />
<button value="Save" type="submit" />
</form>
);
}
}
export default Description;
I want to update the form but whenever the onChange event is fired , I can not update the state, and Input field is not changed.
How do I handle this case.
Any help would be appreciated.
Thanks.

You could write the update like this:
const desc = Object.assign({}, this.state.description);
desc[name] = value;
this.setState({
description: desc
});

This is how I would update in your case
const newState = {...this.state.description};
newState[name] = value;
this.setState({
description: newState,
});
Input elements should not switch from controlled to uncontrolled (or vice versa) [[https://facebook.github.io/react/docs/forms.html#controlled-components]]