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.
Daniel is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.