Skip to content

How to dynamically populate list items in React

I’m setting up an image slider with thumbnail slider using this plugin in React.js:

If I add the <li>s statically it works perfectly fine:

<div id="carousel" class="flexslider">
  <ul class="slides">
    <li><img src="slide1.jpg" /></li>
    <li><img src="slide2.jpg" /></li>
    <li><img src="slide3.jpg" /></li>
    <li><img src="slide4.jpg" /></li>

However if I try to load the content dynamically, the inline styles that are dynamically calculated and added by the plugin code won’t be added to both ul and li elements (i.e width: 210px; margin-right: 5px; float: left; display: block;)

This is how I do it:

render() {
    var projects ={
    var projectImage = 'images/portfolio/'+projects.image;
    return <li key={projects.title}>
             <img alt={projects.title} src={projectImage} />
  return (
    <section id="portfolio">
      <div id="carousel" class="flexslider">
        <ul class="slides">


According to the link that you gave, the plugin requires initialization. Where are you doing your initialization?

I would recommend doing the initialization in the componentDidMount life cycle method. This is because when that code runs the <li> would have already been in DOM.