Overriding components in React and Vanilla JavaScript

override_button.jsx

import React, { Component } from 'react';
import FakeButton from 'react-fake-button'; // from npm public repo

/* In this example, we would be preppending
 * a button to a component
 * Learn to overrride components we can't control
 */
class AppComponent extends Component {
  constructor() {}
  
  async UNSAFE_componentDidMount() { // use UNSAFE_ to match react current deprecated rules
    await this.hackComponentBtn();
  }

  hackComponentBtn = () => {
          let image_el = document.createElement("img");
          let btn = document.querySelector(".fake-button");
          image_el.src = '../img_obj.svg';
          image_el.classList.add("image-class"); // you can also add a class to the image
          btn.insertBefore(image_el, btn.firstChild);
  }

  render () {
    <div>
      <FakeButton text="I am a Fake!"
      /> {/*this should give something like <button class="fake-button">I am a Fake! </button>*/}
    </div>
  }

};