JSX loop not rendering

Question

I think I'm misunderstanding JSX. I've this piece of code:

const DgtPortal = ({children}) => {  
    console.log(children);
    return ReactDOM.createPortal(
      children,
      document.getElementById(children.props.id)
    );
  };

 render() {
    var customDgt = document.getElementsByClassName('cust-dgt');
    customDgt = Array.from(customDgt);
    var index = 1;
    var state = this.state;
    return  (
        <div>           
            <DgtPortal>               
                    <CustomDigital        
                    id={customDgt[index].id}   
                    icon={customDgt[index].getAttribute('data-icon')}
                    value={state.data[customDgt[index].getAttribute('data-bind')][customDgt[index].getAttribute('data-address')]}
                    />
            </DgtPortal>

            {customDgt.map(function(dgt, index){                
                <div>{console.log("child id = " + customDgt[index].id)}
                <DgtPortal>
                    <CustomDigital        
                    id={customDgt[index].id}   
                    icon={customDgt[index].getAttribute('data-icon')}
                    value={state.data[customDgt[index].getAttribute('data-bind')][customDgt[index].getAttribute('data-address')]}
                    />
                </DgtPortal></div>
                })                
            }

    </div>
    );
}

the DgtPortal inside the loop doesn't render nothing while the one outside is rendering I'm sure that the loop is executed becuase of the log... where I'm doing wrong?

Answer 1

You need to explicitly return yourjsx

        {customDgt.map(function(dgt, index){                
            return(<div>{console.log("child id = " + customDgt[index].id)}
            <DgtPortal>
                <CustomDigital        
                id={customDgt[index].id}   
                icon={customDgt[index].getAttribute('data-icon')}
                value={state.data[customDgt[index].getAttribute('data-bind')][customDgt[index].getAttribute('data-address')]}
                />
            </DgtPortal></div>)
            })                
        }