I am getting this error
Warning: Editdamnpoll 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.
Here's my code
```
import React, { Component } from 'react';
import Api from '../../utils/ApiManager';
import {Link} from 'react-router';
var pollId = 2;
var newVotesObj ={};
class Editdamnpoll extends Component {
constructor(){
super()
this.state = {
poll:{
pollquestion: 'ankur',
author: 'ankur',
responses: [1]
},
newresponses:[2]
};
}
componentWillMount(){
var urlWithId =this.props.location.pathname;
var pollID = urlWithId.split('/').pop();
console.log("here's the poll id",pollID)
Api.get('/api/polls/' + pollID, null, (err, response) => {
if(err){
alert("Error: " + err);
}
else{
var newobj = {pollquestion:response.message.pollquestion,author:response.message.author,responses:response.message.responses}
this.setState({
poll:newobj
});
var newarr = this.state.poll.responses.map(function(i,index){
return i.response
})
var tochange = this.state.newresponses;
this.setState({
newresponses:newarr
})
console.log("this is only array",this.state.newresponses);
console.log("conventional responses",this.state.poll.responses)
}
});
}
editpoll(){
Api.put('/api/polls/' + pollId, newVotesObj, (err, response) => {
if (err) {
console.log("Error: " + JSON.stringify(err));
return;
}
// Success so update the state with the correct scores
/*
var listLen = updatedList.responses.length;
for (let i = 0; i < listLen; i++) {
if (updatedList.responses[i]['response'] == selectedRadio)
updatedList.responses[i]['votes'] = totalVotes;
}
// Get doughnut to re-draw chart. (using a data store?)
var votesSoFar = updatedList.responses.map(function(rv) { return rv.votes; });
chartValues.datasets[0].data = votesSoFar
this.setState({
data: chartValues,
list: updatedList
});
*/
},true);
}
valuechangetext(e){
console.log("this is the id",e.target.id)
var key = e.target.id;
var newresponses = this.state.newresponses[key];
this.setState({
newresponses:e.target.value
})
}
render(){
console.log("state",this.state)
console.log("this map",this.state.poll.responses)
var newarr = this.state.newresponses;
var responseinput = this.state.poll.responses.map(function(i, index){
return(
<div key={index} >
<input type="text" id={index} onChange={this.valuechangetext.bind(this)} value={this.state.newresponses[index]} /> <br /><br />
</div>
)
}.bind(this));
console.log("response input inside render",responseinput)
return (
<div>
<h2>Edit the damn poll here!!</h2>
<h4>{this.state.pollquestion}</h4>
<p>author:{this.state.author}</p>
<form onSubmit={this.handleedit}>
{responseinput}
<br/>
<input type="submit" name="submitBtn" value="Submit Edited Poll"/>
</form>
<button onClick={this.editpoll.bind(this)}>Edit Poll</button>
<Link to="/">Back</Link>
</div>
)
}
}
export default Editdamnpoll
```
My research till now on this matter
I looked at stackoverflow questions. Every answer suggest me that I should initiate state's key value pair with "" . If it is null or undefined, react initiate it as uncontrolled component. When i am setting its value to this.state... . React thinks, I am changing uncontrolled component to controlled. But, as you can see right now, I initiated all states with some value. So, I am clueless why I still see this warning message?
