Display sharepoint list item in unorderlist list using spfx

Question

I am trying to insert sharepoint list items in UL. right now each item is added in separate UL. please help how to iterate and add all sharepoint list item in one UL.

public componentDidMount(){ 
      if(this.props.Dropdownprop != undefined){
      }
      alert("second" + this.props.Dropdownprop);
        var reactHandler = this; 
        $.ajax({ 
            url: "https://sharepointprod.sharepoint.com/teams/SharepointPOC/_api/lists(guid'"+this.props.Dropdownprop+"')/items", 
            type: "GET", 
            headers:{'Accept': 'application/json; odata=verbose;'}, 
            success: function(resultData) {          
              reactHandler.setState({ 
                items: resultData.d.results,
              }); 
            }, 
            error : function(jqXHR, textStatus, errorThrown) { 
            } 
        }); 
      }
      public render(): React.ReactElement<IScrollTickerWebPartProps> {
        return ( 
           <div>
                 {this.state.items.map(function(item,key){     
                   return (<div className={styles.marquee} key={key}> 
                   <span>
                       <div>
                       <ul className={styles.jsnews}>
                       <li>{item.Title}</li>
                       </ul>
                       </div> 
                       </span>
                     </div>); 
                 })}                    
             </div> 
       ); 
     }

score 0 · Accepted Answer · answered Feb 01 '19 at 20:39

Review this part of your code in your render method:

                 {this.state.items.map(function(item,key){     
                   return (<div className={styles.marquee} key={key}> 
                   <span>
                       <div>
                       <ul className={styles.jsnews}>
                       <li>{item.Title}</li>
                       </ul>
                       </div> 
                       </span>
                     </div>); 
                 })}

You are using map to turn each this.state.items into a div className={styles.marquee}. Since each of these divs has a ul in it, you are actually creating one ul for each of the items in this.state.items.

Instead, you should turn each of the this.state.items into a li, and put all of it into one ul. You can still do this with map, but it will have to be moved deeper into the HTML structure. See this example:

<ul className={styles.jsnews}>
    {this.state.items.map(function(item,key){
        return (<li>{item.Title}</li>);
    }}
</ul>

Display sharepoint list item in unorderlist list using spfx

1 Answers1