Using 'ref' as array in React

Question

I have some issues when im trying to reference inputs as arrays in React with Redux.

The code below maps one Panel per article in the array.

var articles = this.props.item.array.articles.map((article, index) => {
     return <Panel key={index} header={'Article ' + index}>
        <Input type='select' ref='id' label='Article' defaultValue={article.id} >
          {articles}
        </Input>
     </Panel>
})

I'm trying to construct the refs so that they're in an array format, which does not seem to be possible at the moment. Array of references. #1899

I guess i could solve this by create some sort of ref="article["+counter+"][id]"

But that is a horrible solution, and i really don't want to go down that path.

The json array below would be my desired format for the refs:

"articles": [
        {
            "_joinData": {
                "price": "100",
                "quantity": "50"
            },
            "id": "05f54207-fb6f-40b5-820e-26059a803343"
        },
        {
            "_joinData": {
                "price": "200",
                "quantity": "70"
            },
            "id": "05f54207-fb6f-40b5-820e-26059a803343"
        }
]

The price & quantity index would be 2 more inputs.

Which i've decided to not include in the code example.

A nice solution to this problem would be very appreciated.

The question is not clear. this.refs is a String-keyed Object, not a "JSON array" — P Varga
– P Varga, Commented Feb 15, 2016 at 23:20
No it's not and what i meant was that my desired output for the articles index would be a json array in the specified format. — JazzCat
– JazzCat, Commented Feb 16, 2016 at 7:52

P Varga · Accepted Answer · 2016-02-14 18:56:26Z

2

I believe you can iterate through this.refs like an array by using Object.keys.

Ex. Object.keys(this.refs).forEach(key => func(this.refs[key]))

To run func function for each reference.

edited Feb 14, 2016 at 18:56

P Varga

20.4k14 gold badges77 silver badges118 bronze badges

answered Feb 11, 2016 at 3:56

Yuya

2,3111 gold badge12 silver badges16 bronze badges

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

1 Comment

Sergio Belevskij Over a year ago

this can be simple: Object.values(this.refs)

Collectives™ on Stack Overflow

Using 'ref' as array in React

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related