When i type, the textbox is getting out of focus. I am able to type only one letter at a time. Following is my code: -
<TabPanel value={value} index={0}>
{[...Array(commentCount),].map((item, index) => {
return (
<>
<div className="col-12 d-flex comments-content">
<div className="mb-0 flex-10">
<textarea name="" id="" rows="4" className="w-100 p-2 mb-3" data-testid={"commentTextArea_" index}
value={ commentArea.find(x=>x.id==index)?.value==undefined?"":commentArea.find(x=>x.id==index)?.value}
onChange={(e)=>{setComment(e,index)}}/>
</div>
</div>
</div>
and my js code is :-
const [commentArea,setCommentArea]=useState([{value:"",id:0}]);
const setComment=(e,index)=>{
const searched= commentArea.find(x => x.id === index);
if(searched!="" && searched!=undefined){
searched.value=e.target.value;
}
else{
let res={
value:e.target.value,id:index
}
commentArea.push(res);
}
setCommentArea([...commentArea]);
}
CodePudding user response:
Your textfield should have a event handler function looking like this:
const handleChange = (event) => {
setCommentArea(event.target.value);
};
CodePudding user response:
Don't use keys which are constantly changing.