React.js, JavaScript Get Img by clicking a parent element from an array

Question

I'm trying to make a select component which works as a navigation.

When I click one of menu list, the clickedValue(img and text) should be on the button element.

I found a way to show clicked text value which is "e.currentTarget.textContent" but for the img, I cannot find a way...

I've tried innerHTML which show me literally link source, but not actual image.

I didn't write some other codes that you don't need, if that bothers you, sorry xD

state = {
   clickedValue : 'cryptocurrency'
}


handleSelected = (e) => {
    const { clickedValue } = this.state;

    this.setState({
        clickedValue : e.currentTarget.textContent
    })
}

const menu = [{
        link : '/service',
        img : some link,
        title : 'Cryptocurrency'
    },{
        link : '/service/wallet',
        img : some link2,
        title : 'Wallet'
    }, {
        link : '/service/ico',
        img : some link3,
        title : 'Ico'
    }]

<button>Clicked Value which is img and text here</button>
{menu.map(
    (menu) => (
         <li onClick={handleSelected} className={cx('list')}><NavLink exact to={menu.link}><img src={menu.img} alt={menu.title}/>{menu.title}</NavLink></li>
    )
)}

Tom Rowe · Accepted Answer · 2018-09-20 03:31:55Z

1

I'm sure you could make it work the way you are intending, but why not simply pass the menu value to handleSelected?

<li onClick={() => this.handleSelected(menu)}

Saves a lot of time for you :)

answered Sep 20, 2018 at 3:31

Tom Rowe

4792 silver badges10 bronze badges

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

4 Comments

Tom Rowe Over a year ago

Also a side note: Best practice is to not reuse your mapping variable name, it causes confusion :P e.g menu.map(menu => {}) < menu.map(menuItem => {})

Mijeong Won Over a year ago

Hey Tom! Thanks for the tip! I mapped those because there are some same attributes, elements in the <li></li> didnt want to write these over and over again. and You're so right about the mapping variable name! thank you!

Mijeong Won Over a year ago

back to the topic, when i write <li onClick={() => this.handleSelected(menu)}, How can i get img from the clicked <li></li>??

Tom Rowe Over a year ago

Onclick your handleSelected() function will receive the menu item object: { link : '/service', img : some link, title : 'Cryptocurrency' } So you can work with that easily, just update your function to do e.img or something

Collectives™ on Stack Overflow

React.js, JavaScript Get Img by clicking a parent element from an array

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related