CODEWITHSUNDEEP
javascriptreactjsreact-native
Nilesh
Nilesh

Reputation: 167

Rendering Multiple Buttons in a View react native programmatically

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>
);

}

Upvotes: 2

Views: 6354

Answers (2)

Winston RIley
Winston RIley

Reputation: 482

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.

Upvotes: 6

Alex Bass
Alex Bass

Reputation: 2432

You can iterate through a list and return a component in the callback. The only requirement is that the returned component 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-components.html

Upvotes: 1

Related Questions