CODEWITHSUNDEEP
javascriptreactjsonchange
mic16
mic16

Reputation: 11

onChange event doesn't properly pass params to my function

So basicly, I have an onChange event in my input that I use to change pictures. I'm trying to do this in a .map since there are multiple pictures and thus I have a "counter" called "i" that keeps track of which picture I'm trying to modify. The problem that I'm having is when I'm trying to pass "i" as one of the params in the onChange event, "i" is always equal to 0 no matter which picture I'm trying to modify.

This is for a social media like site where people can modify their profile pictures. I've tried to declare a new variable and setting it equal to "i" just before the onChange event happens but that doesn't work either

let data = this.state.results.map((item, i) => {
    return (
        <tr key={i}>
            <td>
                <Profile id="profile" className="d-flex justify-content-center">
                    {
                        this.state.accounts[i].profilePicture ?
                        <>
                            <RoundedProfile size="50px" id="roundedProfile" className="profilePicture" shadowed src={ settings.apiUrl + this.state.accounts[i].profilePicture }
                             />
                             <div id="changeProfilePicture" onClick={this.changeProfilePicture}>
                                 <FontAwesomeIcon icon={faPen}/>
                             </div>
                             <input
                             type="file"
                             id="inputProfilePicture"
                             accept="image/png, image/jpeg"
                             value={this.state.profilePicture ? this.state.profilePicture : ""}
                             onChange={(event) => this.handleChangeProfile(event, i)}
                             />
                         </>
                         :
                         <>
                         <div id="changeProfilePicture" onClick={this.changeProfilePicture}>
                             <FontAwesomeIcon icon={faPen}/>
                         </div>
                         <input
                         type="file"
                         id="inputProfilePicture"
                         accept="image/png, image/jpeg"
                         value={this.state.profilePicture ? this.state.profilePicture : ""}
                         onChange={(event) => this.handleChangeProfile(event, i)}
                         />
                     </>
                     }
                 </Profile>
             </td>

So I'm expecting "i" to be equal to the profile picture it's associated with

Upvotes: 1

Views: 846

Answers (2)

Mehdi S
Mehdi S

Reputation: 313

You can get ride of 'event', use 'currentTarget.value property' and assign onChange like this :

class test extends React.Component{
    state = {trKey: 0}

    handleChangeProfile = (id)=>{
     /**your instructions**/
     this.setState({trKey: i.currentTarget.value })
    }

    render(){
    return(
           /****/
           onChange = {this.handleChangeProfile}
    )

} }

Upvotes: 0

HamidReza Behzadi
HamidReza Behzadi

Reputation: 321

you should send i with first parameter: your code : onChange={(event) => this.handleChangeProfile(event, i)} and change to onChange={(event) => this.handleChangeProfile(i,event)} for more detail https://reactjs.org/docs/handling-events.html#passing-arguments-to-event-handlers

Upvotes: 1

Related Questions