REACT creating a component with a condition

[Hirn]

I was trying to create a Dynamic Form component with a condition in the <items> tag and I got an error...

  render() {
      var newUser = true;
      var newPassword = false;
      return (
        <>
          <DynamicForm
            ID="userDataForm"
            numCols="2" autoFocus="true" margin={CONSTANT.PADDING} cellPadding={CONSTANT.PADDING} width="99%" titleWidth="150" titleAlign="left" minHintWidth="3">
            <items>
              <TextItem
                name={CONSTANT._NAME}
                defaultValue={user[CONSTANT._NAME]}
                disabled={newUser ? "false" : "true"}
                hint={newUser ? "*" : ""}
                selectOnFocus="true" width="*">
                {newUser &&
                  <icons>
                    <FormItemIcon src={CONSTANT.BUTTONS_ICONS + "check_srv.png"} inline="false" tabIndex="-1" showOver="true" click={this.isUserNameFree} />
                  </icons>
                }
              </TextItem>
              {newPassword &&
                <PasswordItem
                  name={CONSTANT.PASSWORD}
                  hint={newUser ? "*" : ""}
                  selectOnFocus="true" width="*">
                  {newUser &&
                    <icons>
                      <FormItemIcon src={CONSTANT.BUTTONS_ICONS + "info.png"} inline="false" tabIndex="-1" showOver="true" click={this.showPasswordInfo} />
                    </icons>
                  }
                </PasswordItem>
              }
              {(newUser && newPassword) &&
                <PasswordItem
                  name="verifypassword"
                  hint={newUser ? "*" : ""}
                  selectOnFocus="true" width="*">
                </PasswordItem>
              }
            </items>
          </DynamicForm>
        </>
      );

Syntax error parsing the JSX for property '' at http://localhost:3000/static/js/bundle.js:42370:15 at Array.forEach (<anonymous>) at DynamicForm.getPropertyValue
(http://localhost:3000/static/js/bundle.js:42323:25) at DynamicForm._getComponentConfigWithChildren (http://localhost:3000/static/js/bundle.js:42257:32) at
DynamicForm.getComponentConfigWithChildren (http://localhost:3000/static/js/bundle.js:42220:17) at DynamicForm._createSCInstance
(http://localhost:3000/static/js/bundle.js:42091:23) at DynamicForm.componentDidMount (http://localhost:3000/static/js/bundle.js:42034:10) at commitLayoutEffectOnFiber
(http://localhost:3000/static/js/bundle.js:69962:34) at commitLayoutMountEffects_complete (http://localhost:3000/static/js/bundle.js:71129:13) at commitLayoutEffects_begin
(http://localhost:3000/static/js/bundle.js:71118:11) at commitLayoutEffects (http://localhost:3000/static/js/bundle.js:71064:7) at commitRootImpl
(http://localhost:3000/static/js/bundle.js:72973:9) at commitRoot (http://localhost:3000/static/js/bundle.js:72853:9) at finishConcurrentRender
(http://localhost:3000/static/js/bundle.js:72250:13) at performConcurrentWorkOnRoot (http://localhost:3000/static/js/bundle.js:72101:11) at workLoop (http://localhost:3000/static/js/bundle.js:80050:38) at flushWork (http://localhost:3000/static/js/bundle.js:80028:18) at MessagePort.performWorkUntilDeadline
(http://localhost:3000/static/js/bundle.js:80265:25)

I allowed myself to find the place where the error appears in debugging mode and found it.
After a small change, the error disappeared and everything works.
Could you accept my changes?

ReactComponent.js

...
    getPropertyValue(propName, propObj, typeDescriptor, locator, inline) {
....
        localProps.children.forEach( (item, index)  => {
// ------------------ add for me --------------
            if(!item) {
                return;
            }
//-------------------------------------------

[Hirn]

the solution I proposed only works with the initial rendering. If is called re-rendering, the <items> tag is not updated.

[Isomorphic]

Your render() call appears to return invalid React JSX, or at least an uncommon JSX syntax that we don't support. Specifically, you declare <TextItem/> as having a child element, but that element is declared inside braces (in an attempt to make it conditional?) We support braces to insert JavaScript into the declared JSX, but only as attribute values, not as child elements.

But even if your syntax were allowed, there's a bigger problem. The JSX you return from render is normally only evaluated once, even if render() is called multple times,which it seems you found out based on your follow up post. The recommended approach for post render modifications to SmartClient React components is to either use "React refs" or the widget ID to call methods on the component, as covered by the section titled "Post-render component changes" in our React documentation.

To actually force the component(s) returned by render() to be recreated if it's called again, you can set the attribute recreateOnReactComponentUpdate true on the top component(s), as documented in the section titled "Component lifecycle" in the docs linked above, but it's not the recommended approach, and won't work with your invalid syntax.

[Hirn]

Specifically, you declare <TextItem/> as having a child element, but that element is declared inside braces (in an attempt to make it conditional?)

That's exactly what I wanted to do.
Because this is quite acceptable in react and I have already applied it in the following example

                    {EvolutionServer.getRights("company") &&
                      <tr key={key++}>
                        <td style={{ "whiteSpace": "nowrap" }}>{EvolutionServer.getPropertyName("company")}</td>
                        <td>
                          <input type="text"
                            id="company"
                            name="company"
                            defaultValue={this.state.company}
                            style={{ width: "100%" }} />
                        </td>
                      </tr>
                    }

the smart client throws an error during rendering, but after the slightest code change in ReactComponent.the js that I gave above, everything works without problems.
That's why I asked... could you please accept my changes in ReactComponent.js

[Isomorphic]

Thanks for bringing this to our attention - we are looking into it.

[Isomorphic]

Today's nightly builds, dated 2024-03-06, should now support conditional child elements in JSX, as well as conditional elements in array-type attributes. However, we still recommend using React refs to interact with our components after creation for performance and readability, and you still need to set recreateOnReactComponentUpdate on the component to force recreation of the SC widget upon re-render.

We'll be updating our documentation with a new subtopic that details all of this.

[Hirn]

Today's nightly builds, dated 2024-03-06, should now support conditional child elements in JSX, as well as conditional elements in array-type attributes.

Thank you so much for the good news

and you still need to set recreateOnReactComponentUpdate on the component to force recreation of the SC widget upon re-render.

thanks for the advice. I'm already using it.

[Isomorphic]

The issue you reported related to this thread has already been resolved by today's builds, dated 2024-03-07.

Please see the discussion there.