diff --git a/src/components/forms/event-material-form.js b/src/components/forms/event-material-form.js
index c90dcbbe5..6332e6af1 100644
--- a/src/components/forms/event-material-form.js
+++ b/src/components/forms/event-material-form.js
@@ -1,5 +1,5 @@
 /**
- * Copyright 2017 OpenStack Foundation
+ * Copyright 2026 OpenStack Foundation
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
@@ -11,19 +11,14 @@
  * limitations under the License.
  * */
 
-import React from "react";
+import React, { useState, useEffect } from "react";
 import T from "i18n-react/dist/i18n-react";
 import "awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css";
 import Dropdown from "openstack-uicore-foundation/lib/components/inputs/dropdown";
 import Input from "openstack-uicore-foundation/lib/components/inputs/text-input";
 import UploadInputV3 from "openstack-uicore-foundation/lib/components/inputs/upload-input-v3";
 import TextEditorV3 from "openstack-uicore-foundation/lib/components/inputs/editor-input-v3";
-import {
-  isEmpty,
-  scrollToError,
-  shallowEqual,
-  hasErrors
-} from "../../utils/methods";
+import { scrollToError, hasErrors } from "../../utils/methods";
 import {
   ALLOWED_SLIDES_FORMATS,
   KB,
@@ -38,52 +33,53 @@ const MATERIAL_TYPE = {
   PRESENTATION_VIDEO: "PresentationVideo"
 };
 
-class EventMaterialForm extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      entity: { ...props.entity },
-      file: null,
-      errors: props.errors
-    };
-
-    this.handleChange = this.handleChange.bind(this);
-    this.handleChangeMUType = this.handleChangeMUType.bind(this);
-    this.handleSubmit = this.handleSubmit.bind(this);
-    this.handleUploadFile = this.handleUploadFile.bind(this);
-    this.handleRemoveFile = this.handleRemoveFile.bind(this);
-    this.onMediaUploadComplete = this.onMediaUploadComplete.bind(this);
-  }
-
-  componentDidUpdate(prevProps) {
-    const state = {};
-    const name = this.props.entity.id
-      ? this.props.entity.name
-      : this.props.event.title;
-    const description = this.props.entity.id
-      ? this.props.entity.description
-      : this.props.event.description;
-
-    scrollToError(this.props.errors);
-
-    if (!shallowEqual(prevProps.entity, this.props.entity)) {
-      state.entity = { ...this.props.entity, name, description };
-      state.errors = {};
+const EventMaterialForm = ({ entity, errors, event, onSubmit }) => {
+  const [entityState, setEntityState] = useState(entity);
+  const [errorsState, setErrorsState] = useState(errors);
+
+  // on admin we upload one per time
+  const mediaType = {
+    ...entityState.media_upload_type,
+    max_size:
+      (entityState.media_upload_type?.max_size || MAX_MEDIA_UPLOAD_SIZE) * KB,
+    max_uploads_qty: 1
+  };
+  const mediaInputValue = entityState.filename ? [entityState] : [];
+
+  const eventMaterialsOpts = [
+    { label: "Link", value: MATERIAL_TYPE.PRESENTATION_LINK },
+    { label: "Slide", value: MATERIAL_TYPE.PRESENTATION_SLIDE },
+    { label: "Video", value: MATERIAL_TYPE.PRESENTATION_VIDEO },
+    { label: "Media Upload", value: MATERIAL_TYPE.PRESENTATION_MEDIA_UPLOAD }
+  ];
+
+  const mediaUploadsOpts = event.type.allowed_media_upload_types.map((mu) => ({
+    label: mu.name,
+    value: mu.id
+  }));
+
+  const disableInputs =
+    entityState.class_name === MATERIAL_TYPE.PRESENTATION_MEDIA_UPLOAD;
+
+  const slideMediaType = {
+    id: "slide",
+    max_size: MAX_SLIDE_UPLOAD_SIZE * KB,
+    type: {
+      allowed_extensions: ALLOWED_SLIDES_FORMATS
     }
+  };
 
-    if (!shallowEqual(prevProps.errors, this.props.errors)) {
-      state.errors = { ...this.props.errors };
-    }
+  useEffect(() => {
+    setEntityState(entity);
+    setErrorsState({});
+  }, [entity]);
 
-    if (!isEmpty(state)) {
-      this.setState({ ...this.state, ...state });
-    }
-  }
+  useEffect(() => {
+    scrollToError(errors);
+    setErrorsState(errors);
+  }, [errors]);
 
-  handleChange(ev) {
-    const entity = { ...this.state.entity };
-    const errors = { ...this.state.errors };
+  const handleChange = (ev) => {
     let { value, id } = ev.target;
 
     if (ev.target.type === "checkbox") {
@@ -94,290 +90,246 @@ class EventMaterialForm extends React.Component {
       value = parseInt(ev.target.value);
     }
 
-    errors[id] = "";
-    entity[id] = value;
-
-    this.setState({ entity, errors });
-  }
+    setEntityState({ ...entityState, [id]: value });
+    setErrorsState({ ...errorsState, [id]: "" });
+  };
 
-  handleChangeMUType(ev) {
-    const entity = { ...this.state.entity };
-    const errors = { ...this.state.errors };
+  const handleChangeMUType = (ev) => {
     const { value } = ev.target;
 
-    const type = this.props.event.type.allowed_media_upload_types.find(
+    const type = event.type.allowed_media_upload_types.find(
       (mu) => mu.id === value
     );
-    errors.media_upload_type_id = "";
-    entity.media_upload_type_id = value;
-    entity.media_upload_type = type;
-    entity.name = type.name;
-
-    this.setState({ entity, errors });
-  }
-
-  handleUploadFile(file) {
-    this.setState({ file });
-  }
-
-  handleRemoveFile() {
-    const entity = { ...this.state.entity };
-    entity.file_link = "";
-    entity.filename = "";
-    entity.filepath = "";
-    this.setState({ entity, file: null });
-  }
 
-  onMediaUploadComplete(response) {
-    const { entity } = this.state;
+    setEntityState({
+      ...entityState,
+      media_upload_type_id: value,
+      media_upload_type: type,
+      name: type.name
+    });
+    setErrorsState({ ...errorsState, media_upload_type_id: "" });
+  };
+
+  const handleRemoveFile = () => {
+    setEntityState({
+      ...entityState,
+      file_link: "",
+      filename: "",
+      filepath: ""
+    });
+  };
+
+  const onMediaUploadComplete = (response) => {
     if (response) {
-      entity.filepath = `${response.path}${response.name}`;
-      entity.filename = response.name;
-      this.setState({ entity });
+      setEntityState({
+        ...entityState,
+        filepath: `${response.path}${response.name}`,
+        filename: response.name
+      });
     }
-  }
+  };
 
-  handleSubmit(ev) {
-    const { entity } = this.state;
+  const handleSubmit = (ev) => {
     ev.preventDefault();
-    this.props.onSubmit(entity);
-  }
-
-  render() {
-    const { entity, errors } = this.state;
-
-    // on admin we upload one per time
-    const media_type = {
-      ...entity.media_upload_type,
-      max_size:
-        (entity.media_upload_type?.max_size || MAX_MEDIA_UPLOAD_SIZE) * KB,
-      max_uploads_qty: 1
-    };
-    const mediaInputValue = entity.filename ? [entity] : [];
-
-    const event_materials_ddl = [
-      { label: "Link", value: MATERIAL_TYPE.PRESENTATION_LINK },
-      { label: "Slide", value: MATERIAL_TYPE.PRESENTATION_SLIDE },
-      { label: "Video", value: MATERIAL_TYPE.PRESENTATION_VIDEO },
-      { label: "Media Upload", value: MATERIAL_TYPE.PRESENTATION_MEDIA_UPLOAD }
-    ];
-
-    const media_uploads_ddl =
-      this.props.event.type.allowed_media_upload_types.map((mu) => ({
-        label: mu.name,
-        value: mu.id
-      }));
-
-    const disableInputs =
-      entity.class_name === MATERIAL_TYPE.PRESENTATION_MEDIA_UPLOAD;
-
-    const slideMediaType = {
-      id: "slide",
-      max_size: MAX_SLIDE_UPLOAD_SIZE * KB,
-      type: {
-        allowed_extensions: ALLOWED_SLIDES_FORMATS
-      }
-    };
-
-    return (
-      <form className="event-material-form">
-        <input type="hidden" id="id" value={entity.id} />
-        <div className="row form-group">
+    onSubmit(entityState);
+  };
+
+  return (
+    <form className="event-material-form">
+      <input type="hidden" id="id" value={entityState.id} />
+      <div className="row form-group">
+        <div className="col-md-4">
+          <label> {T.translate("edit_event_material.type")} *</label>
+          <Dropdown
+            id="class_name"
+            key="class_name_ddl"
+            value={entityState.class_name}
+            placeholder={T.translate(
+              "edit_event_material.placeholders.select_type"
+            )}
+            options={eventMaterialsOpts}
+            onChange={handleChange}
+            disabled={entityState.id !== 0}
+          />
+        </div>
+        {entityState.class_name === MATERIAL_TYPE.PRESENTATION_MEDIA_UPLOAD && (
           <div className="col-md-4">
-            <label> {T.translate("edit_event_material.type")} *</label>
+            <label>
+              {" "}
+              {T.translate("edit_event_material.media_upload_type")} *
+            </label>
             <Dropdown
-              id="class_name"
-              key="class_name_ddl"
-              value={entity.class_name}
+              id="media_upload_type_id"
+              value={entityState.media_upload_type_id}
               placeholder={T.translate(
                 "edit_event_material.placeholders.select_type"
               )}
-              options={event_materials_ddl}
-              onChange={this.handleChange}
-              disabled={entity.id !== 0}
+              options={mediaUploadsOpts}
+              onChange={handleChangeMUType}
+              disabled={entityState.id !== 0}
+            />
+          </div>
+        )}
+      </div>
+      <div className="row form-group">
+        <div className="col-md-6">
+          <label> {T.translate("edit_event_material.name")} *</label>
+          <Input
+            id="name"
+            value={entityState.name}
+            onChange={handleChange}
+            className="form-control"
+            error={hasErrors("name", errorsState)}
+            disabled={disableInputs}
+          />
+        </div>
+        <div className="col-md-6 checkboxes-div">
+          <div className="form-check abc-checkbox">
+            <input
+              type="checkbox"
+              id="display_on_site"
+              checked={entityState.display_on_site}
+              onChange={handleChange}
+              className="form-check-input"
+            />
+            <label className="form-check-label" htmlFor="display_on_site">
+              {T.translate("edit_event_material.display_on_site")}
+            </label>
+          </div>
+        </div>
+      </div>
+
+      {!disableInputs && (
+        <div className="row form-group">
+          <div className="col-md-12">
+            <label> {T.translate("edit_event_material.description")} *</label>
+            <TextEditorV3
+              id="description"
+              value={entityState.description}
+              onChange={handleChange}
+              error={hasErrors("description", errorsState)}
+              license={process.env.JODIT_LICENSE_KEY}
             />
           </div>
-          {entity.class_name === MATERIAL_TYPE.PRESENTATION_MEDIA_UPLOAD && (
-            <div className="col-md-4">
-              <label>
-                {" "}
-                {T.translate("edit_event_material.media_upload_type")} *
-              </label>
-              <Dropdown
-                id="media_upload_type_id"
-                value={entity.media_upload_type_id}
-                placeholder={T.translate(
-                  "edit_event_material.placeholders.select_type"
-                )}
-                options={media_uploads_ddl}
-                onChange={this.handleChangeMUType}
-                disabled={entity.id !== 0}
-              />
-            </div>
-          )}
         </div>
+      )}
+      {entityState.class_name === MATERIAL_TYPE.PRESENTATION_LINK && (
         <div className="row form-group">
           <div className="col-md-6">
-            <label> {T.translate("edit_event_material.name")} *</label>
+            <label> {T.translate("edit_event_material.link")} *</label>
             <Input
-              id="name"
-              value={entity.name}
-              onChange={this.handleChange}
+              id="link"
+              value={entityState.link}
+              onChange={handleChange}
               className="form-control"
-              error={hasErrors("name", errors)}
-              disabled={disableInputs}
+              error={hasErrors("link", errorsState)}
             />
           </div>
-          <div className="col-md-6 checkboxes-div">
-            <div className="form-check abc-checkbox">
-              <input
-                type="checkbox"
-                id="display_on_site"
-                checked={entity.display_on_site}
-                onChange={this.handleChange}
-                className="form-check-input"
-              />
-              <label className="form-check-label" htmlFor="display_on_site">
-                {T.translate("edit_event_material.display_on_site")}
-              </label>
-            </div>
+        </div>
+      )}
+
+      {entityState.class_name === MATERIAL_TYPE.PRESENTATION_SLIDE && (
+        <div className="row form-group">
+          <div className="col-md-12">
+            <label>
+              {" "}
+              {T.translate("edit_event_material.slide")} (max size 500Mb)
+            </label>
+            <UploadInputV3
+              id="slide"
+              onUploadComplete={onMediaUploadComplete}
+              value={mediaInputValue}
+              mediaType={slideMediaType}
+              postUrl={`${window.FILE_UPLOAD_API_BASE_URL}/api/v1/files/upload`}
+              error={hasErrors("slide", errorsState)}
+              djsConfig={{ withCredentials: true }}
+              parallelChunkUploads
+            />
+          </div>
+          <div className="col-md-7 text-center">
+            <br />
+            <label> OR </label>
+          </div>
+          <div className="col-md-6">
+            <label> {T.translate("edit_event_material.link")}</label>
+            <Input
+              id="link"
+              value={entityState.link}
+              onChange={handleChange}
+              className="form-control"
+              error={hasErrors("link", errorsState)}
+            />
           </div>
         </div>
+      )}
 
-        {!disableInputs && (
-          <div className="row form-group">
-            <div className="col-md-12">
-              <label> {T.translate("edit_event_material.description")} *</label>
-              <TextEditorV3
-                id="description"
-                value={entity.description}
-                onChange={this.handleChange}
-                error={hasErrors("description", errors)}
-                license={process.env.JODIT_LICENSE_KEY}
-              />
-            </div>
+      {entityState.class_name === MATERIAL_TYPE.PRESENTATION_VIDEO && (
+        <div className="row form-group">
+          <div className="col-md-6">
+            <label> {T.translate("edit_event_material.youtube_id")} *</label>
+            <Input
+              id="youtube_id"
+              value={entityState.youtube_id}
+              onChange={handleChange}
+              className="form-control"
+              error={hasErrors("youtube_id", errorsState)}
+            />
           </div>
-        )}
-        {entity.class_name === MATERIAL_TYPE.PRESENTATION_LINK && (
-          <div className="row form-group">
-            <div className="col-md-6">
-              <label> {T.translate("edit_event_material.link")} *</label>
-              <Input
-                id="link"
-                value={entity.link}
-                onChange={this.handleChange}
-                className="form-control"
-                error={hasErrors("link", errors)}
-              />
-            </div>
+        </div>
+      )}
+      {entityState.class_name === MATERIAL_TYPE.PRESENTATION_VIDEO && (
+        <div className="row form-group">
+          <div className="col-md-6">
+            <label> {T.translate("edit_event_material.external_url")} *</label>
+            <Input
+              id="external_url"
+              value={entityState.external_url}
+              onChange={handleChange}
+              className="form-control"
+              error={hasErrors("external_url", errorsState)}
+            />
           </div>
-        )}
+        </div>
+      )}
 
-        {entity.class_name === MATERIAL_TYPE.PRESENTATION_SLIDE && (
+      {entityState.class_name === MATERIAL_TYPE.PRESENTATION_MEDIA_UPLOAD &&
+        mediaType?.type && (
           <div className="row form-group">
             <div className="col-md-12">
               <label>
                 {" "}
-                {T.translate("edit_event_material.slide")} (max size 500Mb)
+                {T.translate("edit_event_material.media_upload_file")}{" "}
+                {`(max size: ${
+                  entityState.media_upload_type.max_size / KB
+                }Mb )`}
               </label>
               <UploadInputV3
-                id="slide"
-                onUploadComplete={this.onMediaUploadComplete}
+                id={`media_upload_${mediaType.id}`}
+                onUploadComplete={onMediaUploadComplete}
                 value={mediaInputValue}
-                mediaType={slideMediaType}
+                mediaType={mediaType}
+                onRemove={handleRemoveFile}
                 postUrl={`${window.FILE_UPLOAD_API_BASE_URL}/api/v1/files/upload`}
-                error={hasErrors("slide", errors)}
+                error={hasErrors(mediaType.name, errorsState)}
                 djsConfig={{ withCredentials: true }}
                 parallelChunkUploads
               />
             </div>
-            <div className="col-md-7 text-center">
-              <br />
-              <label> OR </label>
-            </div>
-            <div className="col-md-6">
-              <label> {T.translate("edit_event_material.link")}</label>
-              <Input
-                id="link"
-                value={entity.link}
-                onChange={this.handleChange}
-                className="form-control"
-                error={hasErrors("link", errors)}
-              />
-            </div>
           </div>
         )}
 
-        {entity.class_name === MATERIAL_TYPE.PRESENTATION_VIDEO && (
-          <div className="row form-group">
-            <div className="col-md-6">
-              <label> {T.translate("edit_event_material.youtube_id")} *</label>
-              <Input
-                id="youtube_id"
-                value={entity.youtube_id}
-                onChange={this.handleChange}
-                className="form-control"
-                error={hasErrors("youtube_id", errors)}
-              />
-            </div>
-          </div>
-        )}
-        {entity.class_name === MATERIAL_TYPE.PRESENTATION_VIDEO && (
-          <div className="row form-group">
-            <div className="col-md-6">
-              <label>
-                {" "}
-                {T.translate("edit_event_material.external_url")} *
-              </label>
-              <Input
-                id="external_url"
-                value={entity.external_url}
-                onChange={this.handleChange}
-                className="form-control"
-                error={hasErrors("external_url", errors)}
-              />
-            </div>
-          </div>
-        )}
-
-        {entity.class_name === MATERIAL_TYPE.PRESENTATION_MEDIA_UPLOAD &&
-          media_type &&
-          media_type.type && (
-            <div className="row form-group">
-              <div className="col-md-12">
-                <label>
-                  {" "}
-                  {T.translate("edit_event_material.media_upload_file")}{" "}
-                  {`(max size: ${entity.media_upload_type.max_size / KB}Mb )`}
-                </label>
-                <UploadInputV3
-                  id={`media_upload_${media_type.id}`}
-                  onUploadComplete={this.onMediaUploadComplete}
-                  value={mediaInputValue}
-                  mediaType={media_type}
-                  onRemove={this.handleRemoveFile}
-                  postUrl={`${window.FILE_UPLOAD_API_BASE_URL}/api/v1/files/upload`}
-                  error={hasErrors(media_type.name, errors)}
-                  djsConfig={{ withCredentials: true }}
-                  parallelChunkUploads
-                />
-              </div>
-            </div>
-          )}
-
-        <div className="row">
-          <div className="col-md-12 submit-buttons">
-            <input
-              type="button"
-              onClick={this.handleSubmit}
-              className="btn btn-primary pull-right"
-              value={T.translate("general.save")}
-            />
-          </div>
+      <div className="row">
+        <div className="col-md-12 submit-buttons">
+          <input
+            type="button"
+            onClick={handleSubmit}
+            className="btn btn-primary pull-right"
+            value={T.translate("general.save")}
+          />
         </div>
-      </form>
-    );
-  }
-}
+      </div>
+    </form>
+  );
+};
 
 export default EventMaterialForm;