Want to render buttons Based upon the json { "ActionType" : [{ "Field" : "Button", "FieldText" : "No", "FieldAction" : "this.getCellNumber('no')", "style":"" },{ "Field" : "Button", "FieldText" : "No", "FieldAction" : "this.getCellNumber('yes')", "style":"" }] }

How can I loop it in a render function to get number of buttons in a view

render(){
  return(

        <View style={this.styles.ButtonValContainer}>

        </View>
);

}

Want to render buttons Based upon the json { "ActionType" : [{ "Field" : "Button", "FieldText" : "No", "FieldAction" : "this.getCellNumber('no')", "style":"" },{ "Field" : "Button", "FieldText" : "No", "FieldAction" : "this.getCellNumber('yes')", "style":"" }] }

How can I loop it in a render function to get number of buttons in a view

render(){
  return(

        <View style={this.styles.ButtonValContainer}>

        </View>
);

}

• javascript
• reactjs
• react-native

2 Answers 2

in react you can easily collect an array of elements for rendering.

const buttons = [
    {
      text: 'button one',
      action: () => console.log('pressed button one'),
    }, 
    {
      text: 'button two',
      action: () => console.log('pressed button two')            
    }
];

....

// react class definition

// ...
// assuming `Button` is a defined class in scope.

render() {
  const renderedButtons =  buttons.map(b => {
    return <Button key={b.text} text={b.text} onPress={b.action} />;
  });

  return (
    <View>
     {renderedButtons}
    </View>
  )
}

hope that helps a bit.

You can iterate through a list and return a ponent in the callback. The only requirement is that the returned ponent has an key attribute, which is used by React internally when rerendering (so that it knows what to remove/shift/update etc)

render() {
  return(
    <Wrapper>
      {items.forEach(function(item) {
        return (
          <View style={this.styles.ButtonValContainer} key={'UNIQUE_KEY_HERE'}>
            ...
          </View>
        );
      })}
    </Wrapper>
  );
}

Here's some more info: https://facebook.github.io/react/docs/multiple-ponents.html