CODEWITHSUNDEEP
reactjsreact-nativereact-navigation
Casey
Casey

Reputation: 3

Why would a react-native view not update after render has successfully run?

I have a component DeckListView which I navigate to after updating state with redux. When I use the debugger in chrome I can see the this.props.Decks.map((deck) loop going through successfully with a list of data, but when I see the screen I don't see the additional Text. Any idea what may be happening?

I have what I believe to be the key code snippets below. The rest can be found at https://github.com/wcwcaseman/mobile-flashcards

Reducer

case ADD_DECK :
  return {
    ...state,
    [action.deck.title]:action.deck,
  }

Navigation

homePage = () => {
    this.props.navigation.navigate('DeckListView');
}

Actual page

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

class DeckListView extends Component {

render() {
    return (
    <View>
        <Text>Toast the world</Text>
    {this.props.Decks.map((deck) => {        
            <Text key={deck} >item</Text>
        })}
    </View> 
    );
  }
}

function mapStateToProps ({ decks }) {

let Decks = [];

if(decks !== {} && decks !== null)
{  
    Decks = Object.keys(decks);
}

return {
    Decks: Decks
}
  }

export default connect(mapStateToProps)(DeckListView)

Upvotes: 0

Views: 467

Answers (1)

Bradey Whitlock
Bradey Whitlock

Reputation: 201

You need to return from the map function

{this.props.Decks.map((deck) => {        
            return <Text key={deck} >item</Text>
        })}

Upvotes: 1

Related Questions