Skip to main content

Basics

Tips and tricks for common issues.

How do I make a blank React app?​

In command prompt, enter:

npx create-react-app myApp

Running this command generates a new folder called "myApp" (or whichever custom name you specify). Inside this folder you will find several pre-configured files. The primary file that you will be working with is App.js that is found in the src folder.

Docusaurus with Keytar

setState or this is not defined​

tip

Make sure that your app is written as a class rather than as a function if you are using the context and returnTo props (used by AlgoButton and AlgoSendButton). If you want to write your app as a function, used the onChange prop instead, along with a callback/handler function.

Your code in App.js should look like this (when writing a React app as a class):

import React, {Component} from 'react';

class App extends Component{
    constructor(props) {
        super(props);
        this.state = {
            myValue: "", //your values go here

        };
    }

    //your function and lifecycle code goes here

    render(){
        return ( //your jsx code goes between the <div> tags below:
            <div>
            </div>
        )
    }
}

export default App;

How to trigger other actions after connecting to MyAlgo or sending a transaction​

Add the following code just above the render() call:

 componentDidUpdate(_prevProps, prevState) {
    if (prevState.address !== this.state.address){ // note: address can be replaced with any state key
        //do something
    }
 }

In order to avoid an inifinite loop and browser crashing, setState (or functions that setState) should only be called in componentDidUpdate in a conditional block.