Matt Matt - 3 years ago 183
Javascript Question

How to tell which Card or SelectField is being changed

I have a list of Material UI Cards with a Select list inside each card.

const ads = this.props.ads;
let adsItems = ads.map((c, i) =>
<div key={ads[i].adid}>
<Card>
<CardHeade>
<SelectField
id={String(ads[i].adid)}
value={ads[i].status}
onChange={this.handleChange}>
<MenuItem key={1} value={`Idle`} primaryText={`Idle`} />
<MenuItem key={2} value={`Sent`} primaryText {`Sent`} />
</SelectField>
</CardHeader>
</Card>
</div>
);


Now when selecting a
MenuItem
I want to know which
Card
or
selectField
was changed. If I could simply pass the
SelectField
id in into the
onChange={this.handleChange}
in this case the id is
ads[i].adid
this would be solved simply.

I took a look at the Material UI docs and even their examples show when you select one
MenuItem
all the SelectFields get updated with the same value.

Is there any way I can know which
Card
or
SelectField
is being changed, that would help me greatly.

Thanks

Answer Source

You can just simply pass the id to change event like you said.

onChange={(event) => this.handleChange(event, ads[i].adid)}

if you do like below it won't work because you would be executing it rather than passing it as a prop.

// THIS WON'T WORK
onChange={this.handleChange(ads[i].adid)}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download