Try to search your question here, if you can't find : Ask Any Question Now ?

Variable not iterating

HomeCategory: stackoverflowVariable not iterating
Avatarrupesh asked 5 months ago

I have an array which i am populating from states. now value is being added into this array inside submitForm function which i am calling inside button as:

    <button onClick={this.submitForm}></button>

Whole code is as follows:

class Form extends React.Component{

 constructor(props){
super(props);

this.state={
  uname: '',
  pass: '',
  address:'',
  salary:'',
  addFormValues:{
    username:'',
    password:'',
    address:''
  },
  errorfields:{
    uname_err:'',
    pass_err:'',
    address_err:'',
    salary_err:'',
    valid_user:false,
    valid_pass:false,
    valid_address:false,
    valid_salary:false,
  }


}
this.changeHandler= this.changeHandler.bind(this)
this.pushAddStudentData=new Array()
this.submitForm= this.submitForm.bind(this)

 }

 changeHandler = (ev) =>{

 // alert("gugugu")
this.setState({[ev.target.name]:ev.target.value})
console.log(this.state)
 }


 submitForm = (e) =>{
let finaladdeddata;
  e.preventDefault();

  console.log('this.state.uname:',this.state.uname);
  console.log('this.state.pass:',this.state.pass);


let usererror = {...this.state.errorfields};
var regex_username = new RegExp(/^[a-zA-Z ]*$/);

if(this.state.uname && regex_username.test(this.state.uname)){
    //no error
   // this.state.valid_user= true;  /THIS IS NOT RIGHT WAY, USE THIS.SETSTATE
   alert("iffff");

   usererror.uname_err='';
   usererror.valid_user = true
 console.log("usererror::",usererror)

   console.log("this.STATEuserif:::",this.state.errorfields.valid_user)
   this.setState({errorfields: usererror});


  }else{
    //else of user
    alert('2user')
    console.log('usererror: ',usererror)
    usererror.uname_err= 'username not valid';
    usererror.valid_user = false;

    this.setState({errorfields: usererror});

    //there is error
    console.log("this.STATEuserelse:::",this.state)
}



if(this.state.pass && this.state.pass.length <=6){
  //if of pass
  //no error
 // this.state.valid_pass= true;
 usererror.valid_pass=true;
 usererror.pass_err='';
 this.setState({errorfields:usererror})
 console.log("this.STATEpassif:::",this.state)
}else{
  //else of pass
  alert('2pass')
  usererror.valid_pass=false;
  usererror.pass_err='invalid password';
  this.setState({errorfields:usererror})

  //there is error


console.log('this.state.errorfields',this.state.errorfields)
console.log("this.STATE2:::",this.state)
}
//usererror
//errorfields
console.log("address:", this.state.address)
console.log("salary:", this.state.salary)
//put error fields in address
if(this.state.address && this.state.address.length<=20){
 // this.state.valid_address=true;


usererror.address_err='';
usererror.valid_address=true
  this.setState({errorfields:usererror})
  } else{
    usererror.address_err='Invalid address';
    usererror.valid_address=false
    this.setState({errorfields:usererror})

}

/*form={}
  uname: '',
  pass: '',
  address:''
}*/

console.log('usererror.valid_address',usererror.valid_address);
console.log('usererror.valid_pass',usererror.valid_pass);
console.log('usererror.valid_user',usererror.valid_user);

if(usererror.valid_address==true && usererror.valid_pass==true && usererror.valid_user==true){
  alert("YESSS");
  let addFormValues_dupl= {...this.state.addFormValues};

  addFormValues_dupl.username = this.state.uname;
  addFormValues_dupl.password = this.state.pass;
  addFormValues_dupl.address = this.state.address;
  console.log('addFormValues_dupl',addFormValues_dupl);  
  this.pushAddStudentData.push(addFormValues_dupl)
  console.log('pushAddStudentData',this.pushAddStudentData);  
  // this.setState({addFormValues: this.state.uname})

}else{
  alert("NOOO")
  //this.pushAddStudentData=[]
  console.log('pushAddStudentDataELSE',this.pushAddStudentData[0]);  
}

 }

render(){

  return(

    <div>
<h2>Add Employee info</h2>
<div className="displayerrors">
{/* <ul>{this.state.errorfields.map((a,i)=>{<li>a</li>})}</ul> */}
<input type="hidden" value={this.state.errorfields}/>
<p>{this.state.errorfields.uname_err} - {this.state.errorfields.valid_user}</p>
<p>{this.state.errorfields.pass_err}</p>
<p>{this.state.errorfields.address_err}- {this.state.errorfields.valid_address}</p>
</div>

      <div>
        <label>username:</label>
        <input type="text" noValidate name="uname" onChange={this.changeHandler}/>
      </div>

      <div>
        <label>password:</label>
        <input type="password" noValidate name="pass" onChange={this.changeHandler}/>
      </div>

      <div>
        <label>address:</label>
        <textarea noValidate name="address" onChange={this.changeHandler}></textarea>
      </div>



      <div>


        <button onClick={this.submitForm}></button>

      </div>

      <ul>
                {this.pushAddStudentData.map(a=>{
               return  <li>{a}</li>
                })}
            </ul>

    </div>

  )

}


}

As you can see, all data is coming inside ‘pushAddStudentData’ and i am using map function in it like:

 <ul>
                {this.pushAddStudentData.map(a=>{
               return  <li>{a}</li>
                })}
            </ul>

i am getting the following error:
Objects are not valid as a React child. If you meant to render a collection of children, use an array instead

Please let me know why i am not getting iterated values

1 Answers
Best Answer
AvatarJyoti answered 5 months ago
Your Answer

8 + 1 =

Popular Tags

WP Facebook Auto Publish Powered By : XYZScripts.com