CODEWITHSUNDEEP
javascriptreactjsreduxonchange
Nane
Nane

Reputation: 403

How to get id and input data when onChange event is happening React js?

I am new to React js.I am little bit confused that how get id and onChange evt value at the same time when all the data inside map function.Yes there are already answers out there but nothing worked for me.Any method or help would be appreciated. Thanks in advance.

import React from 'react'
import {connect} from 'react-redux'

class Upload extends React.Component{

    constructor(props){
        super(props);
        this.handleChangeSinglePost = this.handleChangeSinglePost.bind(this)
        this.handleID = this.handleID.bind(this)
    }
    handleChangeSinglePost(data){
        console.log(data)//Get the input//Not working

    }
    handleID(e){

        console.log(e.target.value)get the Id
    }
    renderMaptheSingleUpload(){
        return(
            this.props.photos.photos.map((data) => {
                return(
                    <div key={data.id} className="WholeWrapperForSingleUpload">
                        <div className="imageContainerUpload">
                            <img src={data.blobData} />
                        </div>
                        <div className="ImageTitleForUpload">
                            <form onChange={this.handleID}>
                                <input onChange={this.handleChangeSinglePost(data.id)}  name="caption" type="text" placeholder="Caption This" />
                            </form>
                        </div>
                    </div>
                )
            })
        )
    }
    render(){
        // console.log(this.props.photos)
        return(
            <div className="UploaContainer">
                <div className="UploadContainerContents">

                    {this.renderMaptheSingleUpload()}

                    <div className="tagsForupload">
                        <ul>
                            <li>OrdinaryLife</li>
                            <li>OrdinaryLife</li>
                            <li>OrdinaryLife</li>
                            <li>OrdinaryLife</li>
                            <li>OrdinaryLife</li>
                        </ul>
                    </div>
                    <div className="TagItForUpload">
                        <form>
                            <input type="text" placeholder="Tag it" />
                            <input type="submit" defaultValue="Post " />
                        </form>
                        <div className="suggestionSystemForTagging">
                            <ul>
                                <li>Drake</li>
                                <li>LetMeChoose</li>
                                <li>LetMeChoose</li>
                                <li>LetMeChoose</li>
                                <li>LetMeChoose</li>
                                <li>LetMeChoose</li>
                                <li>LetMeChoose</li>
                                <li>LetMeChoose</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

const mapStateToProps = (state) => {
    return {
        photos:state.photoUpload
    }
};

export default connect(mapStateToProps)(Upload)

Upvotes: 1

Views: 17848

Answers (4)

anoop
anoop

Reputation: 3297

How about using Closures

 handleChangeSinglePost = (id) => (e) => {
    console.log("value>>>",e.target.value);
    console.log("id>>>",id);
 }

 <input onChange={this.handleChangeSinglePost(data.id)} " />

If you prefer not to use experimental syntax

 handleChangeSinglePost(id) {
  return (e) => {
     console.log("value>>>",e.target.value);
     console.log("id>>>",id);
   }
 }

Upvotes: 1

Boky
Boky

Reputation: 12064

The question is answered but you can also do it using bind. 

<input onChange={this.handleChangeSinglePost.bind(this, data.id)} type="text"/>

And then handleChangeSinglePost should looks as follows :

handleChangeSinglePost(id, event){
   ......
}

Here is a fiddle.

Upvotes: 1

Sourbh Gupta
Sourbh Gupta

Reputation: 833

I think you can use function in onChange event as : 

<input onChange={e=>this.handleChangeSinglePost(e.target.value, data.id)} " />

 handleChangeSinglePost(value, id){
     console.log("value>>>",value);
     console.log("id>>>",id);
 }

Upvotes: 7

Shubham Khatri
Shubham Khatri

Reputation: 281636

You need to use bind handleChangeSinglePost() to the data like

<input onChange={this.handleChangeSinglePost.bind(this,data.id)}  name="caption" type="text" placeholder="Caption This" />

Upvotes: 1

Related Questions