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

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related