CODEWITHSUNDEEP
javascriptreactjs
Mijeong Won
Mijeong Won

Reputation: 361

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

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>
    )
)}

Upvotes: 0

Views: 68

Answers (1)

Tom Rowe
Tom Rowe

Reputation: 479

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 :)

Upvotes: 1

Related Questions