typeerror: Cannot read properties of undefined (reading 'handelChangeName')

Question

I want to pass handelChangeName function to oldList component and oldList component must send data to TodaybazarEdit page. Here BoderList function maping OldList Component. But React says me typeerror: Cannot read properties of undefined (reading 'handelChangeName') problem.

Or any way you know please share.

Here is component....

TodayBazarEdit

import OldList from './OldList'

class TodayBazarEdit extends Component {
 
    handelChangeName (e, i) {
     
        console.log( e )
    }

    

BodertList(){
    return this.props.list.map(function ( object, i )  {
        return <OldList obj={object} key={i} onChangeName={ () => this.handelChangeName() } />
    });
}
    render() {
        return ( ... );
    }
}



export default connect(mapStateToProps, mapDispatchToProps)(TodayBazarEdit)

OldList

class OldList extends Component {

    onFieldChangeName = (e) => {
        this.props.onChangeName(e.target.value, this.props.index)
    }
   
    render() {
    
        return (
            <div key={ this.props.index } className='row' >

                <div key={`nameddsee ${ this.props.index }`} className='col-sm-4' >
                    <div  key={`namewe ${ this.props.index }`} className="form-group">
                        <label key={`nameeasdaw ${ this.props.index }`}  > Name Of Product </label>
                        <input  key={`namdsfdseea ${ this.props.index }`}
                            type='text'
                            className="form-control"
                            name='name'
                            defaultValue={ this.props.obj.name }
                            required='required'
                            onChange = { this.onFieldChangeName }
                        />
                    </div>
                </div>
                <div key={`nameallll ${ this.props.index }`} className='col-sm-4' >
                    <div key={`namea1 ${ this.props.index }`} className="form-group">
                        <label key={`name646e ${ this.props.index }`} > Amount Of Product </label>
                        <input key={`namefdfe ${ this.props.index }`}
                            type='text'
                            className="form-control"
                            name='amount'
                            defaultValue={ this.props.obj.qty }
                            required='required'
                            onChange = { this.onFieldChangeAmount }
                        />
                    </div>
                </div>
                <div key={`namersd ${ this.props.index }`} className='col-sm-4' >
                    <div key={`namerer ${ this.props.index }`} className="form-group">
                        <label key={`namsadsee ${ this.props.index }`} >  Amount Of Price </label>
                        <input key={`namesdadsae ${ this.props.index }`}
                            type='number'
                            step='0.01'
                            className="form-control"
                            name='price'
                            defaultValue={ this.props.obj.price }
                            required='required'
                            onChange = { this.onFieldChangePrice }
                        />
                    </div>
                </div>

            </div>


        )
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(OldList)

Answer 1

That's a lot of code, but skimming it - your issue appears to be that you're calling the function and passing its result to onChangeName. What you want is to pass the function itself:

// Change this line
return <OldList obj={object} key={i} onChangeName={ () => this.handelChangeName() } />

// To this
return <OldList obj={object} key={i} onChangeName={this.handelChangeName} />