How can I pass the index of an array into a reactJs onClick?

Question

const Test = ({ inventory }) => <div className="row"> {inventory.map((item, i) => <div className="item" key={"item_" + i}> <div className="card hoverable col s3"> <img onClick={buyItem(i)} src={item.img} alt="" /> <div className="container center-align"> <h4 className=""> {item.name} </h4> <p> Price: {item.price} </p> <p> Average price paid: {item.averageDisplay} </p> <p> Amount owned: {item.owned} </p> <button className="btn" data={item.index} onClick={sellItem(i)} name="button" > Sell </button> </div> </div> </div> )} </div>; ReactDOM.render(<Test inventory{inventory}/>, document.getElementById("container") );

inventory is an array of objects, I've successfully been able to loop through in this example, but for some reason I can't figure out how to pass the value of i into a function despite that it's already being used to generate unique keys.

Yury Tarabanko · Accepted Answer · 2017-07-31 14:26:05Z

1

You need to create a new function

onClick={() => sellItem(i)}

answered Jul 31, 2017 at 14:26

Yury Tarabanko

45.1k10 gold badges88 silver badges99 bronze badges

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

Comments

Murat Karagöz · Accepted Answer · 2017-07-31 14:26:27Z

0

Use it like this by creating a function call

onClick={(event) => buyItem(event, i)}

answered Jul 31, 2017 at 14:26

Murat Karagöz

37.8k16 gold badges82 silver badges114 bronze badges

Collectives™ on Stack Overflow

How can I pass the index of an array into a reactJs onClick?

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related