CODEWITHSUNDEEP
javascriptreactjs
Arush Singh
Arush Singh

Reputation: 139

get index on click of a mapped array in react js

class DataCard extends React.Component {
constructor(props){
    super(props)
    this.state = {
        show: false,
    }

   }

displayContent = (e) => {
    e.preventDefault();
    console.log(e.target.entry);
}
render() {
    console.log(this.props.content,'Data');
    const emailItems = this.props.content.map((email,index) =>{
        return(
            <div key={email.id} className="data-container" >
            <div className="button-card">
                <div className="button__block"></div>
                <div className="button__block"></div>
                <div className="button__block card_block">
                    <div className="data-card-avatar">
                        <ul>
                            <li>
                                <i onClick={this.msgRead} className= . 
      {this.state.show ? "fa fa-envelope" : "fa fa-envelope-open"}></i>
                                <span>count</span>
                            </li>
                            <li>
                                <img />
                            </li>
                            <li>test</li>
                        </ul>
                    </div>
                    <div className="data-card-data">
                        <ul className="email-content-header">
                            <li>To: {email.To}</li>
                            <li>sender : {email.Sender}</li>
                            <li>Date: {email.Email_Date}</li>
                        </ul>
                        <div className="email-sub-header">
                            sub: {email.Subject}
                        </div>
                        <div className="email-con-body">{email.Subject}      
          </div>
                        <Button onClick={this.displayContent}  variant= 
 .                 {"button-data-card-div"} entry={index} content= . 
 {"More"} />
                    </div>
                </div>
            </div>
        </div >
        )
    })
    if (this.props.content.length === 0) {
        return (
            <Loader />
        )
    } else {
        return (
            <div>{emailItems}</div>
        )

sir how do i get the index of the mapped array on click
i am able to get it when i do console.log in the map it gives all the indexes . but i need a function so that when i click it should give the value of the index which is clicked upon Please check the above code and tell me if there is anything which i can do

thanks in advance

Upvotes: 2

Views: 7588

Answers (3)

ayooluwa alfonso
ayooluwa alfonso

Reputation: 116

Like @sebinq and @Abdelouahed have suggested you can write your button like this: 

<Button onClick={(event) => this.displayContent(event, index)}
/>

but doing that means you have already bound the helper function to the

this

of the component [natural behaviour of fat arrow functions].

Or else if you wrote your code like this:

<button onClick={this.handleClick(event, index)}>Click Me!</button>

Then you might need to add this to the constructor

this.handleClick = this.handleClick.bind(this)

As so: 

 constructor(props){
        super(props)
        this.state = {
            show: false,
        }
    this.handleClick = this.handleClick.bind(this)
     }

Goodluck!

Upvotes: 1

Abdelouahed EL HARIRI
Abdelouahed EL HARIRI

Reputation: 305

First add the index argument to your displayContent function like this

displayContent(e, index){
    e.preventDefault();
    console.log(e.target.entry, index); 
}

then add on the button you want to fire the function the onClick attribute like this :

<Button onClick={(e)=>this.displayContent(e,index)} variant= {"button-data-card-div"} entry={index} content={"More"} />

Upvotes: 2

sbqq
sbqq

Reputation: 1091

I dont know what exactly you want to achieve but I suggest that you want to pass index of current element into the helper function callback. If I'm right then your code should looks like:

<Button onClick={(event) => this.displayContent(event, index)}  
    variant={"button-data-card-div"} 
    entry={index} 
    content={"More"} 
/>

If you need "the value of the index" then you can get it from the index inside your helper this.displayContent() method or you can get it inside of callback like so:

<Button onClick={
        (event) => this.displayContent(event, this.props.content[index])}
    variant={"button-data-card-div"} 
    entry={index} 
    content={"More"} 
/>

Upvotes: 1

Related Questions