How to send data to another page in ReactJS

Question

Here I have a problem in ReactJS, in the POST fetch section in NewCases.jsx. There will generate Data i.e. app_uid, then I want to send app_uid data from NewCases.jsx to DNNewCases.jsx, but I don't know how. This is the Full Script:

NewCases.jsx

import React, { Component, Fragment } from 'react';
import './NewCases.css'
import user2 from '../../images/user2.png';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import DNNewCases from '../DynaformCases/DNNewCases';


class NewCases extends Component {

    constructor(props) {
        super(props)
        this.state = {
            token: sessionStorage.getItem("access_token"),
            username: sessionStorage.getItem("username"),
            user_role: '',
            allcases: [],
            inMemoryCases: [],
            showProcess: [],
            dataSess: [],
            app_uid: '',
            dataselanjutnya: '',
            search: '',
        }
        this.getDetailCase = this.getDetailCase.bind(this);
        this.searchData = this.searchData.bind(this);
    }

    componentDidMount() {
        if (window.sessionStorage.getItem("access_token") === null) {
            this.props.history.push('/');
        }

        fetch('https://bpm.*************.or.id/api/1.0/************/extrarest/session-id', {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
                'Accept-Encoding': 'gzip, deflate',
                'Authorization': 'Bearer ' + this.state.token,
            },
        }).then((response) => response.json())
            .then((responseJson) => {
                console.log(responseJson);
                this.setState({
                    dataSess: responseJson,
                });
            });


        fetch("https://bpm.***********.or.id/api/1.0/***********/extrarest/login-user", {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
                'Accept-Encoding': 'gzip, deflate',
                'Authorization': 'Bearer ' + this.state.token,
            }
        }).then(result => result.json()).then(resultJSON => {
            this.getUserRole(resultJSON.uid);
        })
        fetch('https://bpm.**************.or.id/api/1.0/************/case/start-cases', {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
                'Accept-Encoding': 'gzip, deflate',
                'Authorization': 'Bearer ' + this.state.token,
            },
        }).then((response) => response.json())
            .then((responseJson) => {
                console.log(responseJson[0]);
                this.setState({
                    allcases: responseJson,
                    inMemoryCases: responseJson,
                });
            });
    }

    getUserRole = (uid) => {
        fetch("https://bpm.***********.or.id/api/1.0/************/user/" + uid, {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
                'Accept-Encoding': 'gzip, deflate',
                'Authorization': 'Bearer ' + this.state.token,
            }
        }).then(result => result.json()).then(resultJSON => {
            if (resultJSON.usr_role == "PROCESSMAKER_ADMIN") {
                this.setState({ user_role: 'Administrator' })
            } else if (resultJSON.usr_role == "PROCESSMAKER_OPERATOR") {
                this.setState({ user_role: 'Operator' })
            } else if (resultJSON.usr_role == "PROCESSMAKER_MANAGER") {
                this.setState({ user_role: 'Manager' })
            }
        })
    }

    getDetailCase(pro, tas) {
        fetch("https://bpm.***************.or.id/api/1.0/************/cases/", {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accept-Encoding': 'gzip, deflate',
                'Authorization': 'Bearer ' + this.state.token,
            },
            body: JSON.stringify({
                'pro_uid': pro,
                'tas_uid': tas,
            }),
        }).then((response) => response.json())
            .then((responseJson) => {
                this.setState({
                    showProcess: responseJson,
                });
                this.state.app_uid = (this.state.showProcess.app_uid);
            });
    }


    searchData = (event) => {
        this.setState({ search: event.target.value })
        const searchData = this.state.inMemoryCases.filter(
            data => {
                let lowerCase = (data.pro_title).toLowerCase()
                let searchLowerCase = this.state.search.toLowerCase()

                return lowerCase.indexOf(searchLowerCase) > -1;
            }
        );
        this.setState({ allcases: searchData });
    }


    render() {
        return (

            <Fragment>
                <div className="background-nya">
                    <div className="header">
                        <Link style={{ textDecoration: 'none' }} to="/menu">
                            <p className="headerLabel-fix"> ********** </p>
                        </Link>
                        <p className="headerLabelUser"> {this.state.username} </p>
                        <p className="headerLabelPass"> {this.state.user_role} </p>
                        <img className="userIcon" src={user2} />
                    </div>
                    <p className="titlePage"> PROCESS LIST </p>
                    <div className="form-search">
                        <input type="text" value={this.state.search} onChange={this.searchData} placeholder="search"></input>
                    </div>
                    <br />
                    {
                        this.state.allcases.map((process) => {
                            { this.getDetailCase(process.pro_uid, process.tas_uid) }
                            return (
                                <Fragment>
                                    <Link
                                        to={{
                                            pathname: "/dynaform",
                                            state: this.state.app_uid
                                        }}
                                    >
                                        <div key={process.pro_uid} className="caseList" onClick={this.alertShow}>
                                            {process.pro_title}
                                        </div>
                                    </Link>
                                </Fragment>
                            )
                        })
                    }
                </div>

            </Fragment>
        )
    }
}

export default NewCases;

DNNewCases.jsx

import React, { Component, Fragment } from 'react';
import user2 from '../../images/user2.png';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import Iframe from 'react-iframe'


class DNNewCases extends Component {

    
    constructor(props) {
        super(props)
        this.state = {
            username: sessionStorage.getItem("username"),
            token: sessionStorage.getItem("access_token"),
            dataSess: [],

        }
    }

    componentDidMount() {
        if (window.sessionStorage.getItem("access_token") === null) {
            this.props.history.push('/');
        }

        fetch('https://bpm.**********.or.id/api/1.0/**********/extrarest/session-id', {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
                'Accept-Encoding': 'gzip, deflate',
                'Authorization': 'Bearer ' + this.state.token,
            },
        }).then((response) => response.json())
            .then((responseJson) => {
                console.log(responseJson);
                this.setState({
                    dataSess: responseJson,
                });
            });
    }
    
    render() {

        return (
        <Iframe url= {'https://bpm.************.or.id/***********/en/neoclassic/cases/open?APP_UID=&DEL_INDEX=1&action=EDIT&sid=' + this.state.dataSess}
            width="100%"
            height="100%"
            display="block"
            position="fixed" />
        )
    }
    
}

export default DNNewCases;

Hopefully I can find a solution here. Thank you very much

`this.state.app_uid = (this.state.showProcess.app_uid);` - you are directly mutating your state. i suggest to set this new app_uid in `setState` — 95faf8e76605e973, Jul 23 '20 at 08:38

Roshan Nizar · Answer 1 · 2020-07-23T08:50:28.750

0

you can use props when navigating between components,

Have a look at this, to pass data between router link

if not for a better solution, try using Redux.

youtube tutorial click here

edited Jul 23 '20 at 08:50

answered Jul 23 '20 at 08:23

Roshan Nizar

114
1
5

score 0 · Answer 2 · answered Jul 23 '20 at 08:36

I would suggest using "react-redux".

With mapDispatchToProps and some actions, you could save the new data in a reducer, then you could access the data with mapStateToProps.

Links above provide some examples and I personally recommend youtube tutorials from techsith.

score 0 · Answer 3 · answered Jul 23 '20 at 08:58

I suggest the usage of withRouter

export default withRouter(props => <NewCases {...props} />);

From ReactTraining Docs:

You can get access to the history object’s properties and the closest 's match via the withRouter higher-order component. withRouter will pass updated match, location, and history props to the wrapped component whenever it renders.

Once you get access to your history, make use of this snippet to reroute:

this.props.history.push(`/someRoute`);

Simply call this snippet in your setState callback after your API call & after you've set the correct state to app_uid. As I stated in my comment, it appears you are directly mutating your state. I highly suggest to set the new app_uid inside the setState function

As a side note: I do not see your Route configurations. This answer assumes you've at least set up your client-side-routing on your original code base.

How to send data to another page in ReactJS

3 Answers3