Обновите компонент React с помощью javascript

Я хочу обновить компонент React из внешнего базового кода javascript. Я понял, что единственный способ сделать это - использовать props вместо состояний. Я попытался последовать примеру, приведенному в старом ответе (https://stackoverflow.com/a/26035935/10469201), но не могу заставить его работать. Кроме того, является ли плохой практикой частое обновление компонента таким образом? Или есть другой способ?

РЕДАКТИРОВАТЬ : Код, который я пробовал:

index.html:

<div id = "root"></div>
<button id='changeprop'>change name</button>

index.js:

ReactDOM.render(
  <App name = "default name"/>,
  document.getElementById('root')
);

App.js:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
const $ = window.$;

export default class App extends Component {

    constructor(props) {
        super(props);
        this.name = props.name;
    }

    render() {
        return (
            <div>
                name : {this.name}
            </div>
        );
    }

}

var Wrapper = function(name, el) {
  var newName = name;
  function update() {
    return ReactDOM.render(<App name = {newName}/>, el)
  }
  return {
    update: update
  }
}

var newName = "new name";
var wrapper = Wrapper(newName, document.getElementById('root'));

$('#changeprop').on('click', function(){ wrapper.update(); });

При нажатии кнопки я повторно визуализирую компонент, но отображаемое имя по-прежнему является «именем по умолчанию», когда я хочу, чтобы отображалось «новое имя».