Squares with different background colors Titles is an array populated by numbers (1, 2 and 3). Depending on the number, a Square component should have a different background colour. Now, I don't think that having that the switch statements are the best way to make the condition. I'm sure there's a better way to make Square's background depending on the mapped number.

import React, { Component } from 'react';
import { View, Text } from 'react-native';
import { connect } from 'react-redux';
//import { getStatus, getPosition, genGrid } from '../actions';
import { CardSection, Square } from './common';


class MainMaze extends Component {

  generateMaze() {
    const { tiles } = this.props.grid;
    return (
      tiles.map((sq, i) =&gt; {
        switch (sq) {
          case 3:
            return &lt;Square key={i} style={{ backgroundColor: 'red' }}&gt;{sq}&lt;/Square&gt;;
          case 2:
            return &lt;Square key={i} style={{ backgroundColor: 'blue' }}&gt;{sq}&lt;/Square&gt;;
          default:
            return &lt;Square key={i} style={{ backgroundColor: 'green' }}&gt;{sq}&lt;/Square&gt;;
        }
      }
    ));
  }
  render() {
    const { grid, position, status } = this.props;

    return (
      &lt;View&gt;
        &lt;CardSection&gt;
          &lt;Text&gt;{grid.cols}&lt;/Text&gt;
        &lt;/CardSection&gt;
        &lt;CardSection&gt;
          {this.generateMaze()}
        &lt;/CardSection&gt;
      &lt;/View&gt;
    );
  }
}

const mapStateToProps = (state) =&gt; {
  return {
    status: state.status,
    position: state.position,
    grid: state.grid
  };
};

export default connect(mapStateToProps)(MainMaze);


The Square component:

import React from 'react';
import { View, Text } from 'react-native';

const Square = (props) =&gt; {
  return (
    &lt;View style={[styles.containerStyle, props.style]}&gt;
      &lt;Text&gt;
        {props.children}
      &lt;/Text&gt;
    &lt;/View&gt;
  );
};

const styles = {
  containerStyle: {
    borderWidth: 1,
    borderColor: '#ddd',
    elevation: 1,
    alignItems: 'center',
    justifyContent: 'center',
    margin: 0,
    height: 30,
    width: 30
  }
};

export { Square };
The output of generateMaze always will be the same each time, except for one thing, which is the backgroundColor property value of the Square component.
In this case, you don't need a function/method, which output is a maze component; you can create a method to handle the maze colors, dependent on the given parameter, e.g.:
class MainMaze extends Component {
  handleMazeColor(mazeID) {
    if (mazeID === 2) return &quot;blue&quot;;
    else if (mazeID === 3) return &quot;red&quot;;

    return &quot;green&quot;;
  }

  render() {
    const { tiles } = this.props.grid;
    const { grid, position, status } = this.props;

    return (
      &lt;View&gt;
        &lt;CardSection&gt;
          &lt;Text&gt;{grid.cols}&lt;/Text&gt;
        &lt;/CardSection&gt;
        &lt;CardSection&gt;
          {tiles.map((sq, i) =&gt; (
            &lt;Square
              key={i}
              style={{ backgroundColor: this.handleMazeColor(sq) }}
            &gt;
              {sq}
            &lt;/Square&gt;
          ))}
        &lt;/CardSection&gt;
      &lt;/View&gt;
    );
  }
}