implement an array of objects as attributes in one element in react jsx

Question

I have a component and I want to pass down an unknown array of objects (with unknown length) to it and display it as attributes in key and value format in the inner input tag.

<Input type="text" label = {"length" + '(' + this.state.package_length_unit + ')'} placeholder = "length" defaultValue = {this.state.package_length ? this.state.package_length : ''} onInputChange = { this.onInputChange } attrs = {[{name: 'id',value: 'package_length'},{name: 'apikey',value: 'package_length'}]} />

inside the component I have something like this

<input type = {props.type} ref = {this.inputRef} className = {inputClassName} disabled = {props.disabled ? 'disabled' : ''} defaultValue = {props.defaultValue ? props.defaultValue : ''} onChange = {props.onInputChange ? props.onInputChange : e => {}} onKeyUp = {this.handleTyping} placeholder = { props.placeholder ? props.placeholder : '' } {...props.attrs} // ?? // ********* here I want to have ==> // id = 'package_length' // apikey = 'package_length' // ********* printed />

is there a way to achieve this? Thanks in advance.

idmitrov · Accepted Answer · 2019-06-08 10:03:51Z

1

{ ...props.attrs.reduce((prev, curr) => { prev[curr.name] = curr.value; return prev; }, {}) }

answered Jun 8, 2019 at 10:03

idmitrov

5191 gold badge5 silver badges15 bronze badges

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

Collectives™ on Stack Overflow

implement an array of objects as attributes in one element in react jsx

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related