1

I have a problem with making my ButtonGroup dynamic, I tried a lot but nothing seems to work, can someone help me, please?

import React from 'react';
import { ButtonGroup } from 'react-native-elements';

export default class WebsiteFilter extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            WebsiteFilter: 3
    };
}

updateIndex = ( WebsiteFilter ) => this.setState({ WebsiteFilter })

render() {
    const buttons= ['Vergelijkdirect', 'Ivanhoe', 'Bespaarcoach'];
    let { WebsiteFilter } = this.state;
    return (
        <ButtonGroup
            textStyle={{ textAlign: 'center', fontSize: 12, }}
            onPress={this.updateIndex}
            WebsiteFilter={WebsiteFilter}
            buttons={buttons}
        />
    );
    }
}

Instead of:

const buttons= ['Vergelijkdirect', 'Ivanhoe', 'Bespaarcoach'];

I need to display the domain of this array:

[{"id":127,"created_at":"2015-11-02 15:35:11","updated_at":"2016-09-19 11:42:10","deleted_at":null,"customer_id":66,"domain":"http:\/\/vergelijkdirect.com","google_id":"UA-97758230-1","currency_id":1,"root":1,"screenshot":"","integration_date":"2016-09-19 11:42:10"},{"id":283,"created_at":"2017-01-13 16:54:24","updated_at":"2017-01-13 16:54:24","deleted_at":null,"customer_id":66,"domain":"https:\/\/ivanhoe.io","google_id":null,"currency_id":1,"root":0,"screenshot":"","integration_date":null},{"id":327,"created_at":"2017-06-14 19:29:42","updated_at":"2017-06-23 17:29:01","deleted_at":null,"customer_id":66,"domain":"http:\/\/bespaarcoach.vergelijkdirect.com","google_id":"UA-39848260-2","currency_id":1,"root":0,"screenshot":"","integration_date":"2017-06-23 17:29:01"}]
Neeku
  • 3,646
  • 8
  • 33
  • 43
Levi Roest
  • 35
  • 2
  • 5
  • 1
    But where does that data come from? – Jack Bashford Apr 16 '19 at 09:24
  • 2
    `const buttons = data.map(o => o.domain);` (react is irrelevant to this question; all you want is to turn an array of objects where each contains a string into an array of those strings). –  Apr 16 '19 at 09:27
  • Possible duplicate of [From an array of objects, extract value of a property as array](https://stackoverflow.com/questions/19590865/from-an-array-of-objects-extract-value-of-a-property-as-array) –  Apr 16 '19 at 10:44

1 Answers1

0

The property buttons expects an array of strings or components, so in your case, you need to map the array and to return the property that you want to display:

data.map(e => e.id)

Also, the ButtonGroup component does not have a property WebsiteFilter, it has to be selectedIndex.

Your component should look like this:

<ButtonGroup
    textStyle={{ textAlign: 'center', fontSize: 12, }}
    onPress={this.updateIndex}
    selectedIndex={this.state.WebsiteFilter}
    buttons={data.map(e => e.id)}
/>

Here is a working demo.

Hristo Eftimov
  • 13,845
  • 13
  • 50
  • 77