Wsrtjtyk

Trying to convert an in-app webpage to React. The app webview automatically calls a Javascript function to pass an access token to the webpage. So is it possible to use the same existing function to pass the token variable and store it as a React prop?

HTML

<div id="app"></div>

<script>

    function setToken(token){

    //set token to App token prop

  }

</script>

JS

class App extends React.Component {

  constructor(props) {

    super(props);

    this.state = {

      token: "",

    }

  }



  render() {

    return (

      <div>

        <p>{this.state.token}</p>

      </div>

    );

  }

}



ReactDOM.render(<App />, document.querySelector("#app"))

https://jsfiddle.net/wzovs2gy/

You could make it a callback function, so it will be given another function to call when it has a result (meaning it would be passed a function from within React that would then update the state/props. If you're looking to do this with a minimal number of changes, I would suggest that you have the function store the token in a variable, and then later query this variable in React.

It's impossible - or at least impractical - to access React component instance outside React application. This should be done in opposite way, the component should expose global function:

class App extends React.Component {

  constructor(props) {

    super(props);

    this.state = {

      token: "",

    }

  }



  componentDidMount() {

    window.setToken = token => {

      this.setState({ token });

    }

  }



  ...

}

setToken shouldn't be called before React component initialization. Depending on where setToken is called, it may be beneficial to wrap the code that uses it with React application instead and avoid using globals.

Thanks for your help guys, managed to figure out a solution (while not elegant does the job). I declared the ReactDom.Render() as a variable which allows me to reference the function within the React Parent in the Vanilla JS.

JS

var ReactDom = ReactDOM.render(<App />, document.querySelector("#app"));

HTML

function setToken(token){

    ReactDom.setNewToken(token);

  }

https://jsfiddle.net/wzovs2gy/2

I have modified the fiddle:

class App extends React.Component {

  constructor(props) {

    super(props);

    this.state = {

      token: "test",

    }

  }

componentDidMount(){    

    setToken(this.state.token);

}



  render() {

    return (

      <div>

        <p>{this.state.token}</p>

      </div>

    );

  }

}



ReactDOM.render(<App />, document.querySelector("#app"))

https://jsfiddle.net/wzovs2gy/1/