My code is as below -
Home.js
import React from 'react'
import AddNewTask from './../components/addNewTask'
class Home extends React.Component{
constructor(props){
super(props)
this.state = {
addNewTask:{
title:'',
discription:'',
deadline:new Date()
},
}
this.handleNewTaskChange = this.handleNewTaskChange.bind(this)
}
handleNewTaskChange(event){
//console.log(typeof(event))
var evName,evValue;
if(event.target){
const{name,value} = event.target
console.log(name,value)
evName = name
evValue = value
}
else{
evName = "deadline"
evValue = event
}
//console.log(evName,evValue)
this.setState({
addNewTask:{
[evName]:evValue
}
})
}
render(){
return(
<div>
<AddNewTask
newTask = {this.state.addNewTask}
handleChange = {this.handleNewTaskChange}
/>
</div>
)
}
}
addNewTask.js
import React from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
function AddNewTask(props) {
return (
<div>
<form>
<label>Task : </label>
<input
name='title'
placeholder='Enter Task'
value={props.newTask.title}
onChange={props.handleChange}
/>
<br />
<label>Discription : </label>
<textarea
name='discription'
placeholder='Enter Task Discription'
value={props.newTask.discription}
onChange={props.handleChange}
/>{' '}
<br />
<label>Deadline : </label>
<DatePicker
name='deadline'
selected={props.newTask.deadline}
onChange={(date) => props.handleChange(date)}
minDate={new Date()}
/>
</form>
</div>
);
}
export default AddNewTask;
I got this error -
index.js:1 Warning: A component is changing a controlled input of type text to be uncontrolled. Input elements should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://reactjs.org/docs/forms.html#controlled-components
Also, I did not add submit functionality yet.
The problem is happening here:
<textarea
name="discription"
placeholder="Enter Task Discription"
// this value at first was '' and later became undefined which is what caused the warning
value={props.newTask.discription}
onChange={props.handleChange}
/>;
The problem is caused by because when you set state description becomes undefined
handleNewTaskChange(event){
//console.log(typeof(event))
var evName,evValue;
if(event.target){
const{name,value} = event.target
console.log(name,value)
evName = name
evValue = value
}
else{
evName = "deadline"
evValue = event
}
//console.log(evName,evValue)
this.setState({
addNewTask:{
[evName]:evValue
}
})
}
this should be
handleNewTaskChange(event){
const description = event.target.value;
this.setState(prvState => ({
addNewTask:{
...prvState.addNewTask,
description
}
}))
}