Vfrdtyky

I am trying to code in the react for learning and building a dynamic form which takes values from the previous state and generates according to it.

The previous from take input count and I set to a state variable which below component uses it i.e fromObj.count
Below is the component of form :

import React,{ Component } from 'react';

import PropTypes from 'prop-types';

import { connect } from 'react-redux';

import { getDesignationDepartment } from '../actions/fetchActions';



class CollegeMember extends Component{

     constructor(props) {

             super(props);

            this.state= {

                formArray : {},

                errors:{},

                errorClass:{}

            }

     }



     componentDidMount(){

       this.props.getDesignationDepartment();

    }



    handleSubmit = (e) => {

        e.preventDefault();

        if (this.handleValidation()) {

            this.props.formData(e);

        }

    }



    handleValidation = () => {

        let count=this.props.formObj.count;

        let errors = {};

        let errorClass = {};

        let formIsValid = true;

        for(let i=1;i<=count;i++){

            if (!this.state.formArray['name'+i]) {

                formIsValid = false;

                errors["name"+i] = "Name is required";

                errorClass["name"+i] = "is-danger";

            }

            if (!this.state.formArray['email'+i]) {

                formIsValid = false;

                errors["email"+i] = "Email is required";

                errorClass["email"+i] = "is-danger";

            }

            if (!this.state.formArray['contact'+i]) {

                formIsValid = false;

                errors["contact"+i] = "Contact is required";

                errorClass["contact"+i] = "is-danger";

            }

            if (!this.state.formArray['designation'+i]) {

                formIsValid = false;

                errors["designation"+i] = "Designation is required";

                errorClass["designaation"+i] = "is-danger";

            }

            if (!this.state.formArray['department'+i]) {

                formIsValid = false;

                errors["department"+i] = "Department is required";

                errorClass["department"+i] = "is-danger";

            }

              if (!this.state.formArray['gender'+i]) {

                formIsValid = false;

                errors["gender"+i] = "Gender is required";

                errorClass["gender"+i] = "is-danger";

            }



        }

        this.setState({

            errors: errors

        });

        this.setState({

            errorClass: errorClass

        });

        return formIsValid;

    }



     render(){

        if(this.props.List.department!==undefined && this.props.List.designation!==undefined ){

           let dept= this.props.List.department.map(data=>(

           <option key={data.id} value = {data.name} > {data.name} </option>

            ));



        let desg=this.props.List.designation.map(data=>(

            <option key={data.id} value={data.name}>{data.name}</option>

        ));

         var html = MemberForm(this.props.formObj.count,dept,desg);

        }



        return (<div className="container has-text-center">

        <form onSubmit={this.handleSubmit}>

        <div className="columns">{html}</div>

        <div className="columns field">

        <button className="button is-success" type="submit">Submit</button>

        </div>

        </form>

        </div>)

    }

}

export const MemberForm=(i,dept,desg)=>{  

    let buffer=;

  for (let j=1;j<=i;j++){



    buffer.push((<div className="card" key={j}>

    <header className="card-header">

    <p className="card-header-title">Member Detail-{j}</p>

    </header>

    <div className="card-content">

    <div className="field">

    <label className="label">Name</label>

    <div className="control">

    <input name={"name"+j} className={"input "+ (this.state.errorClass["name"+j])} type="text" placeholder="Name"/>

    </div>

    <p className="help is-danger"></p>

    </div>

     <div className="field">

    <label className="label">Email</label>

    <div className="control">

    <input name={"email"+j} className={"input "+ (this.state.errorClass["email"+j])} type="email" placeholder="Email"/>

    </div>

    <p className="help is-danger"></p>

    </div>

     <div className="field">

    <label className="label">Contact</label>

    <div className="control">

    <input name={"contact"+j} className={"input "+ (this.state.errorClass["contact"+j])} type="tel" placeholder="Contact"/>

    </div>

    <p className="help is-danger"></p>

    </div>

    <div className="field">

     <label className="label">Select Gender</label>

        <div className="control">

            <div className={"select " + (this.state.errorClass["gender" + j])}>

                <select name={"gender" + j}><option value='' hidden>Select Gender</option>

                    <option value="m">Male</option>

                    <option value="f">Female</option>

                </select>

            </div>

        </div>

        <p className="help is-danger"></p>

    </div>

     <div className="field">

          <label className="label">Select Designation</label>

          <div className="control">

               <div className={"select "+ (this.state.errorClass["designation"+j])}>

                 <select name={"designation"+j}><option value='' hidden>Select Designation</option>

                {desg}

              </select>

            </div>

          </div>

          <p className="help is-danger"></p>

    </div>

    <div className="field">

          <label className="label">Select Department</label>

          <div className="control">

               <div className={"select "+ (this.state.errorClass["department"+j])}>

                 <select name={"department"+j}><option value='' hidden>Select Department</option>

              {dept}

              </select>

            </div>

          </div>

          <p className="help is-danger"></p>

    </div> 

    </div > </div> ));



  }

   return buffer;

}



CollegeMember.propTypes = {

    formObj: PropTypes.object.isRequired,

    getDesignationDepartment: PropTypes.func.isRequired

}

const mapStateToProps = state => ({

    formObj: state.apiData.formObj,

    List:state.memData.List

});

export default connect(mapStateToProps, {

    getDesignationDepartment

})(CollegeMember);

Getting Error :

TypeError: Cannot read property 'state' of undefined
on Line

<input name={"name"+j} className={"input "+ (this.state.errorClass["name"+j])} type="text" placeholder="Name"/>

MemberForm is a function and won't have access to this referring to the class component in React. You either pass state as an argument to this function or define it as a function without using arrow function so that you can call it with an explicit this

First approach

var html = MemberForm(this.props.formObj.count,dept,desg, this.state.errorClass);





export const MemberForm=(i,dept,desg, errorClass)=>{  

    let buffer=;

  for (let j=1;j<=i;j++){



    buffer.push((<div className="card" key={j}>

    <header className="card-header">

    <p className="card-header-title">Member Detail-{j}</p>

    </header>

    <div className="card-content">

    <div className="field">

    <label className="label">Name</label>

    <div className="control">

    <input name={"name"+j} className={"input "+ (errorClass["name"+j])} type="text" placeholder="Name"/>

    </div>

    <p className="help is-danger"></p>

    </div>

     <div className="field">

    <label className="label">Email</label>

    <div className="control">

    <input name={"email"+j} className={"input "+ (errorClass["email"+j])} type="email" placeholder="Email"/>

    </div>

    <p className="help is-danger"></p>

    </div>

     <div className="field">

    <label className="label">Contact</label>

    <div className="control">

    <input name={"contact"+j} className={"input "+ (errorClass["contact"+j])} type="tel" placeholder="Contact"/>

    </div>

    <p className="help is-danger"></p>

    </div>

    <div className="field">

     <label className="label">Select Gender</label>

        <div className="control">

            <div className={"select " + (errorClass["gender" + j])}>

                <select name={"gender" + j}><option value='' hidden>Select Gender</option>

                    <option value="m">Male</option>

                    <option value="f">Female</option>

                </select>

            </div>

        </div>

        <p className="help is-danger"></p>

    </div>

     <div className="field">

          <label className="label">Select Designation</label>

          <div className="control">

               <div className={"select "+ (errorClass["designation"+j])}>

                 <select name={"designation"+j}><option value='' hidden>Select Designation</option>

                {desg}

              </select>

            </div>

          </div>

          <p className="help is-danger"></p>

    </div>

    <div className="field">

          <label className="label">Select Department</label>

          <div className="control">

               <div className={"select "+ (errorClass["department"+j])}>

                 <select name={"department"+j}><option value='' hidden>Select Department</option>

              {dept}

              </select>

            </div>

          </div>

          <p className="help is-danger"></p>

    </div> 

    </div > </div> ));



  }

   return buffer;

}

Second approach

export function MemberForm(i,dept,desg) { 

and using it like

var html = MemberForm.call(this, this.props.formObj.count,dept,desg, this.state.errorClass);