How to pass data from screen to screen from flat list item

Question

How do i able to pass the list items from first screen to the third screen, i am able to pass data on to the second screen but not the third screen. What i'm trying to achieve is how do i able to edit the list item on the third screen and inside the edit text input get the data and update. By the way, i'm using flat list item, because list view is deprecated. Below are my codes and screenshots.

First Screenshot

Second screenshot

Third screenshot

First screenshot coding

class SecondScreen extends Component {
constructor(props){
    super(props);
    this.state = {
        loading: true,
        email: '',
        name: '',
        title: '',
        description: '',
        error: '',
        dataSource: [],
        isFetching: false
    }
}

onPress(item){
    this.props.navigation.navigate(
        'DetailsScreen',
        {item},
    );
}

renderItem = ({ item }) => {
    return (
         { this.onPress(item) }}>
            
                
                    {"ID - "+item.id}
                
                
                    {"Title - "+item.title}
                
                
                    {"Description - "+item.description}
                
            
        
    )
}

renderSeparator = () => {
    return (
        
        
    )
}

ListEmptyView = () => {
    return (
        

             No job available.

        

    );
}

handleBackButton = () => {
    Alert.alert(
        'Exit App',
        'Exiting the application?', [{
            text: 'Cancel',
            onPress: () => console.log('Cancel Pressed'),
            style: 'cancel'
        }, {
                text: 'OK',
                onPress: () => BackHandler.exitApp()
        },],{
            cancelable: false
        }
    )
    return true;
} 

componentDidMount(){

    this.getAvailableJob()

    BackHandler.addEventListener('hardwareBackPress', 
this.handleBackButton);
} 

getAvailableJob() {
    const headers = {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer ' + this.props.token
    };

    axios({
        method: 'GET',
        url: 'http://192.168.1.201:8000/api/jobs',
        headers: headers,
    }).then((response) => {
        console.log('response3',response)
        console.log('response4',this.props.token)
        this.setState({
            dataSource: response.data,
            isFetching: false
        });
    }).catch((error) => {
        console.log(error);
        this.setState({
            error: 'Error retrieving data',
            loading: false
        });
    });
}

componentWillUnmount() {
    BackHandler.removeEventListener('hardwareBackPress', 
this.handleBackButton);
}

onRefresh() {
    this.setState({ isFetching: true }, function() { this.getAvailableJob() 
});
}

render() {
    const { container, emailText, errorText } = styles;
    const { loading, email, name, error, title, description } = this.state;

    return(
        
             this.onRefresh()}
                refreshing={this.state.isFetching}
                renderItem={this.renderItem}
                keyExtractor={(item, index) => index.toString()}
                ListEmptyComponent={this.ListEmptyView}
                ItemSeparatorComponent={this.renderSeparator}
            />
        
    ); 
}
}

export default withNavigation(SecondScreen);

Second screenshot coding

class DetailsScreen extends React.Component {

handleBackButton = () => {
    this.props.navigation.popToTop();
    return true;
} 

componentDidMount(){
    BackHandler.addEventListener('hardwareBackPress', 
this.handleBackButton);
}

componentWillUnmount() {
    BackHandler.removeEventListener('hardwareBackPress', 
this.handleBackButton);
}

onPress(item){
    this.props.navigation.push(
        'EditDetailsScreen',
        {item},
    );
}

render() {
    const { backButton } = styles;

    let item = this.props.navigation.state.params.item;

    return (
        

            
                 ID { 
this.props.navigation.state.params.item.id }
            

             Title { 
this.props.navigation.state.params.item.title }
             Description { 
this.props.navigation.state.params.item.description }
                 { this.onPress(item) }}>
                     Edit 
                
        
    );
}
}
export default withNavigation(DetailsScreen);

Third screenshot coding

class EditDetailsScreen extends React.Component {

handleTitle = (text) => {
    this.setState({ title: text })
}

handleDescription = (text) => {
    this.setState({ description: text })
}

handleBackButton = () => {
    this.props.navigation.popToTop();
    return true;
} 

componentDidMount(){
    BackHandler.addEventListener('hardwareBackPress', 
this.handleBackButton);
}

componentWillUnmount() {
    BackHandler.removeEventListener('hardwareBackPress', 
this.handleBackButton);
}

updateJobDetails = () => {
    const headers = {
        'Accept': 'application/json',
        'Content-Type': 'application/x-www-form-urlencoded',
        'Authorization': 'Bearer ' + this.props.token
    };

    axios({
        method: 'PUT',
        url: 'http://192.168.1.201:8000/api/jobs',
        headers: headers,
    }).then((response) => {
        this.setState({
            title: response.data,
            description: response.data,
            loading: false
        });
    }).catch((error) => {
        console.log(error);
        this.setState({
            error: 'Error retrieving data',
            loading: false
        });
    });
}

render() {

    return (
        

            
                 ID { 
this.props.navigation.state.params.item.id }
            

             Title { 
this.props.navigation.state.params.item.title }
             Description { 
this.props.navigation.state.params.item.description }

            

            

            
                 Submit 
            
        
    );
}
}

export default withNavigation(EditDetailsScreen);

I can update using postman but not in react native, and also in postman i had to set the Body to use x-www-form-urlencoded instead of form-data. So how do i able to update in react native? Any help would be much appreciated. Below is my postman screenshot.

Postman

programmernewbielearner · Accepted Answer

I've solved the problem by using qs.stringify(data). Below is my updated code.

updateJobDetails = () => {

    url = 'http://192.168.1.201:8000/api/jobs/' + this.props.navigation.state.params.item.id;

    const qs = require('qs');

    const data = {title:this.state.TextInput_Title,
                description:this.state.TextInput_Description};

    const options = {
        method: 'PUT',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            'Authorization': 'Bearer ' + this.props.token
        },
        data: qs.stringify(data),
        url
    }

axios(options).then((response) => {
        console.log('update response',response)
        Alert.alert(
            'Update successful',
            'Your details has been updated', [{
                    text: 'OK',
                    onPress: () => this.props.navigation.popToTop()
            },]
            ,{
                cancelable: false
            }
        )
        this.setState({
            loading: false,

        });

    }).catch((error) => {
        Alert.alert("Please Enter All the Values.");
        console.log(error);
        this.setState({
            error: 'Error retrieving data',
            loading: false
        });
    });
}

render() {

    return (
        

            
                 ID { 
this.props.navigation.state.params.item.id }
            

            
                Title: 
            

                 this.setState({TextInput_Title: TextInputValue})}/>


            
                Description: 
            

             
this.setState({TextInput_Description: TextInputValue})}/>

            
                 Submit 
            
        
    );
}

How to pass data from screen to screen from flat list item

Answers (2)

Related Questions