Closing each 3 buttons inside their own tag when mapping

Question

I'm new in react-native and I'm writing my first big app for android. I need to render buttons dynamically on screen and close each 3 of them in their own View tag to make them stay in one row. This is structure what I'm trying to achieve

<View>
    <Button />
    <Button />
    <Button />
</View>
<View>
    <Button />
    <Button />
    <Button />
</View>
<View>
    <Button />
    <Button />
    <Button />
</View>
etc...

Before I realized that I need to group them by 3 inside the view tag I made code like this:

render() {
    const mappedButtons = reversed_buttons.map((button, i) => {
        if (reversed_types[i] == 1) {return (<Floor key={i} content={button}/>)}
        else {return (<Step key={i} title={button}/>)}
    })
    return (
    <View>
        {mappedButtons}
    </View>)
}

It's working fine but I don't know how to close each 3 of Step-tag inside their own view tag. I was trying to return opening tag of view at the begining and closing and opening tag every third button but I'm getting error 500. I was trying to do it this way:

 render() {
        var reversed_buttons = [ ];
        var reversed_types = [ ];
        for (var i = buttons.length-1; i >= 0; i--) {
            reversed_buttons.push(buttons[i]);
            reversed_types.push(types[i]);
        }
        const mappedButtons = reversed_buttons.map((button, i) => {
            var y = i%3;
            if (i == 0){return(<View>)}
            if (i == 2){return(</View><View>)}
            if (reversed_types[i] == 1) {return (<Floor key={i} content={button}/>)}
            else {return (<Step key={i} title={button}/>)}
        })
        return (
        <View>
            {mappedButtons}
        </View>)
    }

and also in this way:

render() {
    const mappedButtons = reversed_buttons.map((button, i) => {
        var y = i%3;
        if (reversed_types[i] == 1) {return (<Floor key={i} content={button}/>)}
        else {
            if (i == 0){
                return (<View><Step key={i} title={button}/>)
            }
            if (y == 2){
                return (</View><View><Step key={i} title={button}/>)
            }
        }
    })
    return (
    <View>
        {mappedButtons}
    </View>)
}

but this thing still don't want to work fine giving me error 500 in console.

Take a look at [this answer](https://stackoverflow.com/a/46676943/2315280). Its similar to what you are trying to do. — bennygenel, Oct 20 '17 at 20:34
yes, that's right, i'm using % to get iteration only to three not affecting my iterator. The question is how to make React-native to close each 3 buttons in view tag. But anyway thanks for response! :) — Edgarsz, Oct 20 '17 at 20:42

score 1 · Accepted Answer · answered Oct 21 '17 at 01:57

This will do the trick. I'm first breaking down the larger array into individual arrays of not more than 3. Then, I map those arrays to create each group.

const buttons = ['b1', 'b2', 'b3', 'b4', 'b5', 'b6', 'b7', 'b8', 'b9', 'b10', 'b11', 'b12', 'b13', 'b14', 'b15', 'b16', 'b17'];
const button_groups = [];

while (buttons.length) {
  button_groups.push(buttons.splice(0, 3));
}

const renderButtons = button_groups.map(group => {
  const btns = group.map(title => <Button>{title}</Button>);
  return <View>{btns}</View>;
})

Closing each 3 buttons inside their own tag when mapping

1 Answers1