CODEWITHSUNDEEP
reactjsdjangodjango-templatesdjango-react
Daniel
Daniel

Reputation: 1

Embedded react component disable select text on other html elements

I am trying to include a react component in a django template which contains non-react content. My template contains the following code:

{%  load static %}
<!DOCTYPE html>
<html>
<body>
<h1>This text CAN NOT be selected</h1>

<h2>React app</h2>
<div id="react1"></div> <!-- this is the component that the react component will live in. -->
<script src="{% static js %}" defer></script> <!-- js is a variable pointing to the main.XXXXX.js file. -->
</body>
</html>

The variable js refers to the build/static/js/main.XXXXX.js-file build using npm run build and served using django. The index.js file (in react) simply add a component to the div:

import React from 'react';
import { createRoot } from 'react-dom/client';
import App2 from './App2';

if(document.getElementById("react1") != null){
     const root = createRoot(document.getElementById('react1'));
         root.render(
            <App2 />
        );
}

The component (App2.js) is a very simple hello-world example. The page renders correctly (the app is a simple counter app) as shown in the screenshot so all files are up-to-date.

As can be seen I can select/interact with the application, but I cannot select the text defined in the tag (and more importantly, events such as button clicks outside of react are not triggered etc.). The React counter-app works as expected.

I have googled this problem for 3 hours and simply cannot figure out what I am doing wrong. I would of course like to include the react component in a div, and let the rest of the page handle events (clicks, text selection, etc.) as usual.

What I am expecting I want to embed the react component in a HTML page in such a way the rest of the page still allows text selection, handle button clicks, etc.

Upvotes: 0

Views: 72

Answers (0)

Related Questions