<?xml version="1.0" encoding="UTF-8"?>
<feed xmlns="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <title>Check when a form-field component is loaded in React based module</title>
  <link rel="self" href="https://liferay.dev/c/message_boards/find_thread?p_l_id=119785294&amp;threadId=121384263" />
  <subtitle>Check when a form-field component is loaded in React based module</subtitle>
  <id>https://liferay.dev/c/message_boards/find_thread?p_l_id=119785294&amp;threadId=121384263</id>
  <updated>2026-04-05T15:02:35Z</updated>
  <dc:date>2026-04-05T15:02:35Z</dc:date>
  <entry>
    <title>Check when a form-field component is loaded in React based module</title>
    <link rel="alternate" href="https://liferay.dev/c/message_boards/find_message?p_l_id=119785294&amp;messageId=121384262" />
    <author>
      <name>Carlos Durán</name>
    </author>
    <id>https://liferay.dev/c/message_boards/find_message?p_l_id=119785294&amp;messageId=121384262</id>
    <updated>2022-03-23T09:00:21Z</updated>
    <published>2022-03-23T09:00:20Z</published>
    <summary type="html">&lt;p&gt;Hello,&lt;/p&gt;
&lt;p&gt;I've created a form-field module based on React.&lt;/p&gt;
&lt;p&gt;I want to manipulate the component with Javascript but as the code
  fires when DOM is ready, but the component isn't, the code doesn't work.&lt;/p&gt;
&lt;p&gt;The problem is that I'm trying to get a DOM element this way:&lt;/p&gt;
&lt;pre&gt;
&lt;code class="language-javascript"&gt;document.querySelector(&amp;quot;.slider-divisor&amp;quot;)&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;I've tried putting this line in many places of the JS file
  (resources/META-INF/resources/slider-form-field.es.js) but the result
  is always &lt;em&gt;null&lt;/em&gt;.&lt;/p&gt;
&lt;p&gt;I've found a solution using &lt;em&gt;setInterval &lt;/em&gt;that checks when the
  component 'appears' in the DOM. Then, the code is executed and
  setInterval stops, but I want to know if exists a way to check an
  event when component is loaded to execute my code instead use &lt;em&gt;setinterval&lt;/em&gt;.&lt;/p&gt;
&lt;p&gt;This is command I've used to create the module:&lt;/p&gt;
&lt;pre&gt;
&lt;code&gt;blade create -t form-field -c SliderFormField --js-framework react -p com.liferay.dynamic.data.mapping.form.field.type.slider slider-form-field

&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Thanks in advance.&lt;/p&gt;</summary>
    <dc:creator>Carlos Durán</dc:creator>
    <dc:date>2022-03-23T09:00:20Z</dc:date>
  </entry>
</feed>
