static/*: update render functions to react18 syntax

adhocracy4/comments/static/comments/react_comments.jsx

@@ -1,9 +1,10 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
 
 import CommentBox from './CommentBox'
 
 module.exports.renderComment = function (el) {
   const props = JSON.parse(el.getAttribute('data-attributes'))
-  ReactDOM.render(<CommentBox {...props} />, el)
+  const root = createRoot(el)
+  root.render(<CommentBox {...props} />)
 }

adhocracy4/comments_async/static/comments_async/index.jsx

@@ -1,9 +1,10 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
 
 import CommentBox from './comment_box'
 
 export function renderComment (el) {
   const props = JSON.parse(el.getAttribute('data-attributes'))
-  ReactDOM.render(<CommentBox {...props} ref={(commentbox) => { window.commentbox = commentbox }} />, el)
+  const root = createRoot(el)
+  root.render(<CommentBox {...props} ref={(commentbox) => { window.commentbox = commentbox }} />)
 }

adhocracy4/follows/static/follows/react_follows.jsx

@@ -1,8 +1,10 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
+
 import FollowButton from './FollowButton'
 
 module.exports.renderFollow = function (el) {
   const project = el.getAttribute('data-project')
-  ReactDOM.render(<FollowButton project={project} />, el)
+  const root = createRoot(el)
+  root.render(<FollowButton project={project} />)
 }

adhocracy4/polls/assets/react_polls.jsx

@@ -1,18 +1,21 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
+
 import { EditPollQuestions } from './EditPollQuestions'
 import PollQuestions from './PollQuestions'
 
 module.exports.renderPolls = function (element) {
   const pollId = element.getAttribute('data-poll-id')
-
-  ReactDOM.render(<PollQuestions pollId={pollId} />, element)
+  const container = element
+  const root = createRoot(container)
+  root.render(<PollQuestions pollId={pollId} />)
 }
 
 module.exports.renderPollManagement = function (element) {
   const pollId = JSON.parse(element.getAttribute('data-poll-id'))
 
   const reloadOnSuccess = JSON.parse(element.getAttribute('data-reloadOnSuccess'))
 
-  ReactDOM.render(<EditPollQuestions pollId={pollId} reloadOnSuccess={reloadOnSuccess} />, element)
+  const root = createRoot(element)
+  root.render(<EditPollQuestions pollId={pollId} reloadOnSuccess={reloadOnSuccess} />)
 }

adhocracy4/ratings/static/ratings/react_ratings.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import classnames from 'classnames'
 import django from 'django'
 
@@ -152,5 +152,7 @@ module.exports.RatingBox = RatingBox
 
 module.exports.renderRatings = function (el) {
   const props = JSON.parse(el.getAttribute('data-attributes'))
-  ReactDOM.render(<RatingBox {...props} />, el)
+
+  const root = createRoot(el)
+  root.render(<RatingBox {...props} />)
 }

adhocracy4/reports/static/reports/react_reports.jsx

@@ -1,6 +1,6 @@
 import django from 'django'
 import React from 'react'
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
 
 import ReportModal from './ReportModal'
 
@@ -15,13 +15,13 @@ module.exports.renderReports = function (el) {
   const container = document.createElement('div')
   document.body.appendChild(container)
 
-  ReactDOM.render((
+  const root = createRoot(container)
+  root.render(
     <ReportModal
       name={props.modalName}
       title={django.gettext('You want to report this content? Your message will be sent to the moderation. The moderation will look at the reported content. The content will be deleted if it does not meet our discussion rules (netiquette).')}
       btnStyle="cta"
       objectId={props.objectId}
       contentType={props.contentType}
-    />
-  ), container)
+    />)
 }