How do i get refs value from dynamically generated array in React

Question

I got my data from firebase, looped through it and displayed it on the frontend. Now I am trying to get the refs value of the already displayed value when I click on it. For example, when I click on Dino, i should be able to see the value 'Dino' on my console tab of Chrome browser.

Here is a link to the picture of the array list displayed on react frontend

<ul>
    <li onClick={this.handleSubmit}>        
        {               
            Object.keys(this.props.group).map(function(keyName, keyIndex) {
                return(
                    <div key={keyIndex}>{keyName}</div>
                )
            })
        }
    </li>
</ul>

Some code that reproduces the problem would be more useful than a picture here. Could you try setting up a demo in jsfiddle? — user1726343
– user1726343, Commented Jul 7, 2017 at 19:29

Dmitry Sokurenko · Accepted Answer · 2017-07-07 21:00:29Z

1

Assuming that those "dino, magic & muu" are the keys in this.props.group you need to add an onClick handler to that div, so:

<div key={keyIndex} onClick={() => console.log(keyName)}>{keyName}</div>

answered Jul 7, 2017 at 21:00

Dmitry Sokurenko

6,1324 gold badges34 silver badges54 bronze badges

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

Comments

Chase DeAnda · Accepted Answer · 2017-07-07 21:01:07Z

0

You'll need to bind a click event to each div within the li. I would actually rewrite it like so:

 <ul>    
    {               
        Object.keys(this.props.group).map( (keyName, keyIndex) => {
            return(
                <li key={keyIndex} onClick={this.handleSubmit.bind(this, keyName}>  
                    {keyName}
                </li>
            )
        })
    }
</ul>

Then your handleSubmit function will get the keyName as a param:

handleSubmit(keyName){
    // Do something...
}

answered Jul 7, 2017 at 21:01

Chase DeAnda

16.5k3 gold badges34 silver badges41 bronze badges

1 Comment

Wes Over a year ago

Thank you very much, the this keyword was nightmare for me. Now i have seen my mistake

Collectives™ on Stack Overflow

How do i get refs value from dynamically generated array in React

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related