Отображение второго массива в JSX

Question

В настоящее время я сопоставляю некоторые данные, чтобы отобразить 4 точки в строке состояния в JSX в React Native.Тем не менее, у меня есть второй массив, который я хотел бы отобразить, чтобы каждая дата появлялась там, где у меня есть комментарий нужны даты, чтобы перейти сюда , так что даты идут ниже каждоготочка, которая отображается.

Я отображаю их под этим комментарием, но мне нужно, чтобы они были выше как часть первой карты.Есть ли способ пойти по этому поводу?

const StatusBar = ({ projectData }) => {

  const statusBarPositions = [1, 2, 3];
  const currentStatusBarPosition = () => {
    let position;

    switch (projectData.get('state')) {
      case 'Project 1':
        position = 1;

        break;
      case 'Project 2':
        position = 2;
        break;
      case 'Project 3':
        position = 3;
        break;
      default:
        position = 0;
    }

    return position;
  };

  const projectDates = ['12/1', '3/1', '6/1', '9/1']

  return (
    <View>
      <View style={ styles.statusBarContainer }>
        <View style={ styles.progressDotFirst } />
        {
          statusBarPositions.map((statusBarPosition) => {
            return (
              <View key={ statePosition } style={ styles.statusBarLineContainer }>
                <View style={ (currentStatusBarPosition() >= statusBarPosition) ? [styles.statusBarLine, styles.statusBarActive] : styles.statusBarLine } />
                <View style={ (currentStatusBarPosition() >= statusBarPosition) ? [styles.statusBarDot, styles.statusBarActive] : styles.statusBarDot } />
              </View>
              <View>
                <Text>{ ***need dates to go here*** }</Text>
              </View>
            );
          })
        }
      </View>
      <View>
        {
          projectDates.map((date) => {
            return (
              <Text>{ date }</Text>
            )
          })

        }
      </View>
    </View>
  );
};

StatusBar.propTypes = {
  projectData: PropTypes.instanceOf(Object)
};

export default statusBar;

Answer 1

array.map передает индекс массива в качестве второго аргумента.Если оба массива соответствуют друг другу по индексу, то вы можете использовать это для отображения дат (обратите внимание на индекс i в statusBarPositions.map((statusBarPosition, i)):

<View style={ styles.progressDotFirst } />
{
    statusBarPositions.map((statusBarPosition, i) => {
    return (
        <View key={ statePosition } style={ styles.statusBarLineContainer }>
        <View style={ (currentStatusBarPosition() >= statusBarPosition) ? [styles.statusBarLine, styles.statusBarActive] : styles.statusBarLine } />
        <View style={ (currentStatusBarPosition() >= statusBarPosition) ? [styles.statusBarDot, styles.statusBarActive] : styles.statusBarDot } />
        </View>
        <View>
        <Text>{ projectDates[i] }</Text>
        </View>
    );
    })
}
</View>