Textarea issue in reactJS : A component is changing a controlled input of type undefined to be uncontrolled

Question

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.

when you have an object in the state with field like : addNewTask: {"title'': "super", discription: "cool"} If you want to change the value of a field, avoid use this : this.setState(addNewTask: {"title": "blabla"} because it will erase the other field and the new value of object addNewTask will be addNewTask: {"title": "blablabla"}. You should use the syntaxe show by @ehab below. — William Bridge, May 28 '20 at 12:54

score 3 · Accepted Answer · edited May 04 '23 at 03:33

3

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
      }
  }))
}

edited May 04 '23 at 03:33

Dhia Djobbi

1,176
2
15
35

answered May 28 '20 at 12:39

ehab

7,162
1
25
30

I am new to javascript. can you please explain syntax or link any reference? and how can I genralize `handleNewTaskChange` function? – ameya May 28 '20 at 14:41
Thanks...!! it is working. I refer [this](https://stackoverflow.com/questions/43638938/updating-an-object-with-setstate-in-react) too. – ameya May 28 '20 at 15:09
1

@ameya yea of course, for difference between controlled components and uncontrolled components you can see https://reactjs.org/docs/forms.html#controlled-components and https://reactjs.org/docs/uncontrolled-components.html, regarding the syntax used to update a part of an object, you can check the spread operator documentation https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax, good luck – ehab May 28 '20 at 16:39

Textarea issue in reactJS : A component is changing a controlled input of type undefined to be uncontrolled

1 Answers1