django-react-templatetags icon indicating copy to clipboard operation
django-react-templatetags copied to clipboard

Add React 18 support

Open matttk opened this issue 3 years ago • 3 comments

React 18 replaces render with createRoot and root.render. (how to upgrade)

Is there a plan to update django-react-templatetags to support React 18?

matttk avatar Apr 26 '22 14:04 matttk

Hi @matttk! Yes for sure, we just need to find the time to do some proper maintenance :)

For now, the best approach is to override the template https://github.com/Frojd/django-react-templatetags/blob/main/django_react_templatetags/templates/react_print.html

I'm renaming this issue and will have it on top of our todo list when we find the time.

marteinn avatar May 13 '22 09:05 marteinn

for reference: i'm using this snippet right now (without hydration)

{% if components %}
    {% for component in components %}
        {{ component.json_obj|json_script:component.data_identifier }}
        <script>
            const container = document.getElementById('{{ component.identifier }}');
            const root = ReactDOMClient.createRoot(container);
            root.render(
                React.createElement({{ component.name }}, JSON.parse(document.getElementById("{{ component.data_identifier }}").textContent)),
            );
        </script>
    {% endfor %}
{% endif %}

with these imports

import React from "react";
import ReactDOMClient from "react-dom/client";

krystofbe avatar Jul 18 '22 09:07 krystofbe

como se integra django-react-templateta a react 18?

chano195 avatar Feb 19 '24 00:02 chano195