Add a new view

By creating a new area, it makes sense to create a new view to display datas and to create interfaces to interact with the new area.

The smallest way to create a view is this:

class FriendshipView extends React.Component{
    constructor(props) {
        super(props);

        this.state = {
            friendships: []
        };      
    }

    componentDidMount() {    }


    render() {

        let view;

        view = (
            <div className={"mb-10"}>
                <p>New Area</p>
                <ToastMessage></ToastMessage>
            </div>
        );

        return view;
    }
}

const friendshipContainer = document.getElementById('hatchup-friendchip-view');

if (friendshipContainer !== null) {
    const root = ReactDOM.createRoot(friendshipContainer);
    root.render(<FriendshipView/>);
}

Important notes:

  • Extend from React.Component
  • use a unique name for the component
  • use constructor to set initial values
  • use componentDidMount() to load external data, etc. 
  • use a unique name for the container like "friendshipContainer"