How do I add items to array in following format and display it in flatlist?

Question

I am trying to add items to redux state array. I can add items but my flatlist doesn't display them. It's most likely because they are like this ['abc-123, bcd-234'] etc. instead of [{license: abc-123}] so I could call the item.license in my flatlist. And how would I add an id to these items. How can I fix my structure a bit to get the [{id: 0, license: 'abc-123'}] ?

This is my action file:

const ADD_NEW_CAR = 'ADD_NEW_CAR'
const DELETE_EXISTING_CAR = 'DELETE_EXISTING_CAR'

export const addNewCar = (text) => ({
    type: ADD_NEW_CAR,
    payload: text
})

export const deleteExistingCar = (license) => ({
    type: DELETE_EXISTING_CAR,
    payload: license
})

this is my reducer:

const ADD_NEW_CAR = 'ADD_NEW_CAR'
const DELETE_EXISTING_CAR = 'DELETE_EXISTING_CAR'

const initialState = {
  cars: [],
}

const carsListReducer = (state = initialState, action) => {
  switch (action.type) {
    case ADD_NEW_CAR:
      return {
        ...state,
        cars: [...state.cars, action.payload],
      }
    case DELETE_EXISTING_CAR:
        return {
            cars: [
                ...state.cars.filter(license => license !== action.payload)
            ]
        }
    default:
      return state
  }
}

export default carsListReducer

and this is my flatlist:

const totalCars = props.cars.length

          <FlatList
            style={{ marginTop: 0 }}
            data={cars}
            keyExtractor={(item) => item.id}
            renderItem={({ item }) => {
              return (
                <View style={licenseContainer}>
                  <View style={{ width: '20%' }}>
                    <Ionicons
                      style={carIcon}
                      name='car-outline'
                      size={30}
                      color={colors.black}
                    />
                  </View>
                  <View style={{ width: editing ? '60%' : '80%' }}>
                    <Text key={item.license} style={licenseText}>
                      {item.license}
                    </Text>
                  </View>
                  {editing ? (
                    <View style={{ width: '20%' }}>
                      <Ionicons
                        name='ios-close-circle-outline'
                        size={30}
                        color={colors.black}
                        style={removeIcon}
                        onPress={() => removeCar(item.license)}
                      />
                    </View>
                  ) : null}
                </View>
              )
            }}
            ItemSeparatorComponent={() => {
              return <View style={divider} />
            }}
          />

const mapStateToProps = (state) => ({
  signedIn: state.authReducer.signedIn,
  cars: state.cars
})

const mapDispatchToProps = (dispatch) => ({
  authActions: bindActionCreators(authAction, dispatch),
  addNewCar: text => dispatch(addNewCar(text)),
  deleteExistingCar: car => dispatch(deleteExistingCar(car))
})

export default connect(mapStateToProps, mapDispatchToProps)(ProfileScreen)

Answer 1

If your array contains string values then instead of using item.license just use item

<View style={{ width: editing ? '60%' : '80%' }}>
   <Text key={item} style={licenseText}>
     {item}
   </Text>
 </View>