Access attribute value from another attribute in React

Question

I have a React component for which I need to access an attribute from other attributes.

The use-case is having one of the attributes uniquely identify the component (controlId). The value attribute needs that id to know what to display from props, and the onChange attribute needs that id to tell the parent component how to update.

Currently, I can hardcode the Id in all three places.

<Input
    controlId={"someName"}
    value={this.props.fieldData["someName"]}
    onChange={(evnt) => this.props.handleFieldUpdate(evnt, "someName")}
/>

I have many components like this, and hardcoding strings like "someName" in multiple places is tedious and error prone. Is there a way to access the controlId attribute from the onChange and value attributes?

Do you have to do it that way? Can't name and value get their values from the same state/props? — stever
– stever, Commented Jan 22, 2019 at 19:52
@HemadriDasari updated the description for my exact use-case — efthimio
– efthimio, Commented Jan 22, 2019 at 20:01
Yes you can using event <Input controlId={"some_name"} onChange={(e) => this.props.someFunc(e.target.controlId)}/> — Hemadri Dasari
– Hemadri Dasari, Commented Jan 22, 2019 at 20:03

Hemadri Dasari · Accepted Answer · 2019-01-22 20:14:37Z

1

Use event.target To access the properties of an element. In your case to access controlId you can use event.target.controlId

   <Input controlId={"some_name"} onChange={event => this.props.someFunc(event.target.controlId)}/>

answered Jan 22, 2019 at 20:14

Hemadri Dasari

34.2k41 gold badges125 silver badges166 bronze badges

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

3 Comments

efthimio Over a year ago

With onChange I can utilize the event object. Are there any similar such mechanisms for other attributes like value?

Hemadri Dasari Over a year ago

You can use document.getElementById or refs in react

efthimio Over a year ago

Using document.getElementById will still result in using that Id in multiple places in the same component. I'm not sure how refs can be used here.

Collectives™ on Stack Overflow

Access attribute value from another attribute in React

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related