Changes does not reflect in View for two way data binding of React Native

Question

I am creating a card list from dynamic JSON object with come from webservice. I want two way data binding when click on each card item. When i click on each card item and change something data changes for corresponding JSON object but does not changes in View.

Here is my code

import React, { Component } from 'react';
import {
        Platform,
        StyleSheet,
        Text,
        View,
        ImageBackground,
        Image,
        Dimensions,
        TouchableOpacity,
        TextInput,
        ScrollView,
        ActivityIndicator
} from 'react-native';
import { Container, Header, Content, Button, Tab, Tabs, Footer, Left, Body, Right, Icon, Title, Card, CardItem, List, ListItem } from 'native-base';
export default class natureOfInvestment extends React.Component {
        static navigationOptions = {
            header: null
        };

    constructor(props) {
        super(props);
        this.state = {
            session_id: this.props.navigation.state.params.session_id,
            loading: true,
            investmentItems: [],
        }
    }

    componentDidMount() {
        this.onLoadSelectInvestment();
    }

    onLoadSelectInvestment() {
        return fetch(CommonTasks.ROOT_URL + 'user/pageTwo', {
            method: 'GET',
        })
            .then((response) => response.json())
            .then((responseJson) => {
                var investment = responseJson.all_categories;
                var investment_items = [];
                for (var data of investment) {
                    data.showhide = true;
                    data.text = '';
                    investment_items.push(data);
                }
                this.setState({
                    loading: false,
                    investmentItems: investment_items,
                })
            })
    }

    investmentType(e, item) {
        if (item.showhide == true) {
            item.showhide = false;
        }
        else {
            item.showhide = true;
        }
        console.log(item);
    }

    render() {
        return (
            <Container>
                <View>
                    <List style={{ paddingHorizontal: 7 }}
                        dataArray={this.state.investmentItems}
                        renderRow={(item) =>
                            <Card>
                                <CardItem style={{ backgroundColor: item.background_color, }}>
                                    <Body>
                                        <TouchableOpacity style={{ flexDirection: 'row', alignItems: 'center' }}
                                            key={item.cat_id}
                                            onPress={this.investmentType.bind(this, item)}
                                        >
                                            <View style={{ width: 250, paddingRight: 10 }}>
                                                <Text style={{ color: 'white', fontSize: 17, marginLeft: 10 }}>
                                                    {item.category_name}
                                                </Text>
                                            </View>
                                            <Right>
                                                <Image
                                                    style={{ width: 18, height: 18, }}
                                                    source={require('../assets/images/right_arrow.png')}
                                                />
                                            </Right>
                                        </TouchableOpacity>
                                    </Body>
                                </CardItem>
                                {
                                    item.showhide ?
                                        <View style={{ flexDirection: 'column', margin: 10 }}>
                                            <View style={{ borderColor: 'black', borderRadius: 4, borderWidth: 0.7, }}>
                                                <TextInput
                                                    style={{ textAlignVertical: 'top' }}
                                                    placeholder="Please write the details"
                                                    underlineColorAndroid="transparent"
                                                    multiline={true}
                                                    numberOfLines={4}
                                                    onChangeText={(text) => { item.text = text }}

                                                />
                                            </View>
                                        </View>
                                        : null
                                }
                            </Card>
                        }
                    />
                </View>
            </Container>
        );
    }
}

I want to show/hide the TextInput view or change data within the JSONobject that will reflect in View of the List.

Thanks in advance.

T.sagiv · Answer 1 · 2018-05-09T12:31:23.637

0

After looking at the native-base documentation about List I see that they use the View component so you will have to re render the List component you can do that like that:

 onLoadSelectInvestment() {
    return fetch(CommonTasks.ROOT_URL + 'user/pageTwo', {
        method: 'GET',
    })
        .then((response) => response.json())
        .then((responseJson) => {
            var investment = responseJson.all_categories;
            var investment_items = [];
            for (var data of investment) {
                data.showhide = true;
                data.text = '';
                investment_items.push(data);
            }
            this.setState({
                loading: false,
                investmentItems: investment_items,
            })
            List.forceUpdate();
        })
}

But please note that it will re render the whole list.

edited May 09 '18 at 12:31

answered May 08 '18 at 14:08

T.sagiv

325
2
9

Hello @T.sagiv. Thanks for your reply. – Soumen Manna May 09 '18 at 06:23
I have changed my code as you told. But data changes for each object that i can see console in investmentType() method but not changes in View. – Soumen Manna May 09 '18 at 06:33
Look at the edit I did to my answer, if it doesn't works please let me know. – T.sagiv May 09 '18 at 12:32
Hello @T.sagiv i have got the solution that i need from https://stackoverflow.com/questions/33426760/react-native-listview-not-updating-on-data-change?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa link. Thank You – Soumen Manna May 09 '18 at 14:23

Changes does not reflect in View for two way data binding of React Native

1 Answers1