How to render a list of objects in React

Question

Hi all : ) I'm trying to render a list of objects in reaction, but I can't replace whitespace with black text position (subtitle) . That checkbox box should not appear for the subTitle either.

A small sample of how this currently works

const dataFake = [
  { label: 'Aspiración', value: false },
  {
    subTitle: 'Fuego de las vías respiratorias'
  },
  {
    label: 'Tubo con manguito',
    value: false
  },
  { label: 'Tubo sin manguito', value: false },
  { label: 'Fi02 > 30%', value: false },
  {
    subTitle: 'No intubar'
  },
  { label: 'Esperado', value: false },
  { label: 'Inesperado', value: false },
  {
    subTitle: 'Manifest'
  }
];

{dataFake.map((item, index) => {
            return (
              <View key={index}>
                <Text style={{ fontStyle: 'italic', fontWeight: 'bold' }}>
                  {item.subTitle}
                </Text>
                <CheckBox
                  onClick={() => {}}
                  isChecked={item.value}
                  rightText={item.label}
                />
              </View>
            );
          })}

I would really appreciate any workaround for this to work 🙌

Answer 1

Use conditional rendering,

{dataFake.map((item, index) => {
            return (
              <View key={index}>
                {
                 item.subTitle !== undefined 
                 ? (
                <Text style={{ fontStyle: 'italic', fontWeight: 'bold' }}>
                  {item.subTitle}
                </Text>
                 )
                 : (
                  <CheckBox
                    onClick={() => {}}
                    isChecked={item.value}
                    rightText={item.label}
                  />
                 )
                }      
              </View>
            );
          })}