React Native map() and JSX elements in array

Question

Tried using map() to render an array of JSX elements (tableData inside this.state) in React Native but I'm getting an array with undefined elements instead on the console.

Here is my code:

const TVSHOWIMAGETITLES = [
    MoneyHeist, BreakingBad,
    MoneyHeist, BreakingBad,
    MoneyHeist, BreakingBad,
    MoneyHeist, BreakingBad,
    MoneyHeist];

class HashTablesScreenTwo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            fiveShows: this.props.route.params.selectedShows,
            tableHead: ['Week', 'TV Shows'],
            tableWeeks: [1, 2, 3, 4, 5],
            tableData: []
        }
    }

renderTableData(){
        const jsxArray = this.state.tableWeeks.map((i)=>{this.renderTVShowImageTitle(i-1)})
        console.log(jsxArray)
        console.log(this.state.tableWeeks)
        return{
            tableData: jsxArray
        }
    }
    renderTVShowImageTitle(i) {
        let index = this.state.fiveShows[i];
        return (
            <TVShow
                id={index}
                imageSource={TVSHOWIMAGETITLES[index]}
                onClick={() => 1}
            />
        )
    }

render() {
        const state = this.state;
        { this.renderTableData() }
        return (
            <View>

                <Text>
                    Because you're ambitious,
                    you have decided to binge watch the shows at a rate of one show per week.
                    Here's how your planned schedule looks based on the order you have selected the shows:
                </Text>

                <View style={styles.container}>
                    <Table borderStyle={{ borderWidth: 2, borderColor: '#c8e1ff' }}>
                        <Row data={state.tableHead} style={styles.head} textStyle={styles.text} />
                        <Col data={state.tableWeeks} />
                        <Col data={state.tableData} />
                    </Table>
                </View>
        );
    }
}

Appreciate it if someone could point out what I'm doing wrong here. Thanks!

Marik Ishtar · Accepted Answer · 2020-06-26 13:12:55Z

1

You need to remove the curly braces from the map function, like this:

const jsxArray = this.state.tableWeeks.map((i)=> this.renderTVShowImageTitle(i-1))

Or use a return statement:

const jsxArray = this.state.tableWeeks.map((i)=> { 
                                return this.renderTVShowImageTitle(i-1)
                            })

answered Jun 26, 2020 at 13:12

Marik Ishtar

3,0691 gold badge17 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React Native map() and JSX elements in array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related