Can not access class functions inside the map function in the react native render method

Question

import React from 'react';
import {
    StyleSheet,
    Text,
    View,
    ScrollView,
} from 'react-native';

import { Content, Card, CardItem, Body, Icon, Image, Right, Left, Thumbnail, Button } from 'native-base';
import  HTMLView from 'react-native-htmlview'

import styles from '../components/CustomStyles'
import htmlstyles from '../styles/htmlstyles'

import TimeAgo from 'react-native-timeago'


export default class QuestionsData extends React.Component
{
    constructor(props)
    {
        super(props);
        this.state =
            {
                navigation: null
            }
    }

    componentDidMount()
    {
        this.state.navigation = this.props.navigation;
    }

    viewExtraFile = () =>{
        this.props.navigation.navigate("ExtraFile");
    };

    render() {

        let questions = this.props.data.map(function (questionData, index)
        {
            let  extra_file = "";
            if(questionData.extra_file_details.file_name !== undefined)
            {
                extra_file = (<CardItem>
                    <Button transparent onPress={()=> this.viewExtraFile()}> <Text style={styles.linkText}>{questionData.extra_file_details.file_name} </Text></Button>
                </CardItem>);
            }
            return (
                <Card transparent style={styles.card}>
                    <CardItem>
                        <Left>
                            <Thumbnail source={{uri: questionData.poster_image_url}} />
                            <Body>
                            <Text style={styles.username}>{questionData.poster_name}</Text>
                            <Text note style={styles.category}>{questionData.section_name}</Text>

                            </Body>
                        </Left>
                    </CardItem>
                    <CardItem content>
                        <HTMLView stylesheet={htmlstyles}
                            value={questionData.question }/>
                    </CardItem>
                    {extra_file}
                    <CardItem>
                        <Left>
                            <Button transparent>
                                <Icon name="thumbs-up" />
                                <Text>{questionData.num_applause} Applause</Text>
                            </Button>
                        </Left>
                        <Body>
                        <Button transparent>
                            <Icon  name="chatbubbles" />
                            <Text>{questionData.num_answers} Answers</Text>
                        </Button>
                        </Body>
                        <Right>
                            <Button transparent>
                                <Icon name='time'/>
                                <Text><TimeAgo time={questionData.time}/></Text>
                            </Button>

                        </Right>
                    </CardItem>
                </Card>
            )
        });
        return (

            <Content>
                {questions}
            </Content>
        );
    }


}

I can not access viewExtraFile method, someone please help on how i can do it

dave · Accepted Answer · 2018-04-13 21:29:24Z

1

Change

this.props.data.map(function (questionData, index)
{

to

this.props.data.map((questionData, index) => {

Otherwise this inside of the map will not refer to this outside of the map.

answered Apr 13, 2018 at 21:29

dave

65.1k6 gold badges81 silver badges98 bronze badges

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

1 Comment

daRula Over a year ago

It does not work it i get an error saying { expected. I am using webstorm

daRula · Accepted Answer · 2018-04-13 22:29:34Z

After some iterative work I did this and it worked

export default class QuestionsData extends React.Component

{ constructor(props) { super(props); this.state = { navigation: null } }

componentDidMount()
{
    this.state.navigation = this.props.navigation;
}

questionList(props)
{
    return props.data.map(function (questionData, index)
    {
        let  extra_file = "";
        if(questionData.extra_file_details.file_name !== undefined)
        {
            extra_file = (<CardItem>
                <Button transparent onPress={()=> props.navigation.navigate("ExtraFile")}> <Text style={styles.linkText}>{questionData.extra_file_details.file_name} </Text></Button>
            </CardItem>);
        }
        return (
            <Card transparent style={styles.card}>
                <CardItem>
                    <Left>
                        <Thumbnail source={{uri: questionData.poster_image_url}} />
                        <Body>
                        <Text style={styles.username}>{questionData.poster_name}</Text>
                        <Text note style={styles.category}>{questionData.section_name}</Text>

                        </Body>
                    </Left>
                </CardItem>
                <CardItem content>
                    <HTMLView stylesheet={htmlstyles}
                              value={questionData.question }/>
                </CardItem>
                {extra_file}
                <CardItem>
                    <Left>
                        <Button transparent>
                            <Icon name="thumbs-up" />
                            <Text>{questionData.num_applause} Applause</Text>
                        </Button>
                    </Left>
                    <Body>
                    <Button transparent>
                        <Icon  name="chatbubbles" />
                        <Text>{questionData.num_answers} Answers</Text>
                    </Button>
                    </Body>
                    <Right>
                        <Button transparent>
                            <Icon name='time'/>
                            <Text><TimeAgo time={questionData.time}/></Text>
                        </Button>

                    </Right>
                </CardItem>
            </Card>
        )
    });
}

render() {
    return (

        <Content>
            {this.questionList(this.props)}
        </Content>
    );
}

}

I created a function that displays the list

Collectives™ on Stack Overflow

Can not access class functions inside the map function in the react native render method

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related