get index on click of a mapped array in react js

Question

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

Abdelouahed EL HARIRI · Accepted Answer · 2018-12-01 12:06:59Z

2

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"} />

answered Dec 1, 2018 at 12:06

Abdelouahed EL HARIRI

3052 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Arush Singh Over a year ago

yeah accepted diffrent ways of doing a thing appreciated buddy

ayooluwa alfonso · Accepted Answer · 2018-12-07 11:17:36Z

1

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!

edited Dec 7, 2018 at 11:17

answered Dec 2, 2018 at 7:34

ayooluwa alfonso

1162 silver badges7 bronze badges

Comments

sbqq · Accepted Answer · 2018-12-01 11:52:54Z

1

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"} 
/>

answered Dec 1, 2018 at 11:52

sbqq

1,1212 gold badges14 silver badges25 bronze badges

2 Comments

Arush Singh Over a year ago

Now i am able to get the complete object what i needed first i was planning to get the index and then take the data by mapping it in another component but not i get the complete data thank you very much

sbqq Over a year ago

glad to hear that. Good luck!

Collectives™ on Stack Overflow

get index on click of a mapped array in react js

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related