Ad

JSX Loop Not Rendering

- 1 answer

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?

Ad

Answer

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>)
            })                
        }
Ad
source: stackoverflow.com
Ad