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) => {        switch (sq) {          case 3:            return <Square key={i} style={{ backgroundColor: 'red' }}>{sq}</Square>;          case 2:            return <Square key={i} style={{ backgroundColor: 'blue' }}>{sq}</Square>;          default:            return <Square key={i} style={{ backgroundColor: 'green' }}>{sq}</Square>;        }      }    ));  }  render() {    const { grid, position, status } = this.props;    return (      <View>        <CardSection>          <Text>{grid.cols}</Text>        </CardSection>        <CardSection>          {this.generateMaze()}        </CardSection>      </View>    );  }}const mapStateToProps = (state) => {  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) => {  return (    <View style={[styles.containerStyle, props.style]}>      <Text>        {props.children}      </Text>    </View>  );};const styles = {  containerStyle: {    borderWidth: 1,    borderColor: '#ddd',    elevation: 1,    alignItems: 'center',    justifyContent: 'center',    margin: 0,    height: 30,    width: 30  }};export { Square };
Squares with different background colors
javascript;react.js;react native