Headless WordPress: Updating User Settings | https://www.ibenic.com/headless-wordpress-updating-user-settings

dashboard-2.js

/**
 * Showing the general Profile view
 */
function Profile( { user }) {
    return <div className="jumbotron">
        Welcome { user.nickname }
        <p>I think your name is { user.first_name } { user.last_name}</p>
    </div>;
}

class Dashboard extends React.Component {
    constructor( props ) {
        // ...
    }

    tabs = {
        'profile': Profile,
        'settings': Settings
    }
    // ...
}

dashboard-3.js

class Dashboard extends React.Component {
    // ...
    render() {
        return (
            <div className="dashboard">
                <button type="button" className="btn btn-danger" onClick={this.Logout}>Logout</button>
                <TabPanel 
                    tabs={[
                        {
                            name: 'profile',
                            title: 'Profile',
                        },
                        {
                            name: 'settings',
                            title: 'Settings',
                        },
                    ]}
                >
                { (tab) => this.renderTab(tab) }
                </TabPanel>
            
            </div>
        );
    }
}

dashboard.js

import React from 'react';
import { TabPanel } from '@wordpress/components';
import Settings from './dashboard/Settings';
const axios = require('axios');

class Dashboard extends React.Component {
    constructor( props ) {
        super( props );
        this.state = { user: { } };
        this.Logout = this.Logout.bind(this);
        this.getCurrentUser = this.getCurrentUser.bind(this);
        this.setCurrentUser = this.setCurrentUser.bind(this);
        this.renderTab      = this.renderTab.bind(this);
    }
    
    /**
     * Method to set the user
     */
    setCurrentUser( user ) {
        this.setState( { user } );
    }
    
   /**
    * Render tab
    */
   renderTab( tab ) {
        const TagName = this.tabs[tab.name || 'profile'];
        return <TagName {...this.props} {...this.state} setCurrentUser={this.setCurrentUser} />;
    }
    // ...
}

settings-2.js

import React from 'react';
import { TextControl, Button } from '@wordpress/components';
const axios = require('axios');

class Settings extends React.Component {
    constructor( props ) {
        super( props );
        this.state = { user: props.user, update: {} };
        this.updateUser = this.updateUser.bind(this);
    }
  
    updateUser() {
        const token = this.props.token;
        const userURI = this.props.url + '/wp-json/wp/v2/users/me';
        const _this = this;
        axios({
            method: 'POST',
            url: userURI,
            headers: { 'Authorization': 'Bearer ' + token },
            data: this.state.update
        }).then(function (response) {
            if ( response.status === 200 ) {
                const data = response.data;
                _this.props.setCurrentUser( data );
                
            }
        })
        .catch(function (error) {
            console.error( error );
        });

    }

    // ...
}

export default Settings;

settings.js

import React from 'react';
import { TextControl, Button } from '@wordpress/components';
const axios = require('axios');

class Settings extends React.Component {
    constructor( props ) {
        super( props );
        this.state = { user: props.user, update: {} };
    }

    getValue( key, user, update ) {
        let value = user[ key ] || '';
        value = update[ key ] || value;
        return value;
    }
    render() {
        const { user, update } = this.state;
        return (

            <div className="settings">
                <TextControl className="form-group" 
                    label="First Name"
                    value={ this.getValue( 'first_name', user, update ) }
                    onChange={ (value) => { 
                        var update = { first_name: value }; 
                        this.setState( { update: { ...this.state.update, ...update } } );
                     } }
                />
                <Button isPrimary onClick={ this.updateUser }>Update</Button>
            </div>
        );
    }
}

export default Settings;