Conditional slide rendering

Consider the follow code, mostly from the README. I added a condition render for the first slide.

I will get either a type error in Code Sandbox, or I will get an empty slide on my local clone.

What is the best way to conditionally rendering slides within the carousel?

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Carousel } from 'react-responsive-carousel';

class DemoCarousel extends Component {
    render() {
        return (
            <Carousel>
                {false ? 
                 (<div>
                  <img src="http://lorempixel.com/output/cats-q-c-640-480-1.jpg" />
                  <p className="legend">Legend 0</p>
                  </div>) : null
                }
                <div>
                    <img src="assets/1.jpeg" />
                    <p className="legend">Legend 1</p>
                </div>
                <div>
                    <img src="assets/2.jpeg" />
                    <p className="legend">Legend 2</p>
                </div>
                <div>
                    <img src="assets/3.jpeg" />
                    <p className="legend">Legend 3</p>
                </div>
            </Carousel>
        );
    }
});

[MichaelWheldon]

One of your slides is returning null, which will still add a blank slide. You need to filter out (remove) this value before returning. A quick and dirty way off the top of my head would be to:

• move all your slides into an array and wrap it in a function which removes all null values (lodash’s _.compact and _.map would be handy here, but however you like 🤷‍♂), then map over that array to return each slide. Something like this:

const images = _.compact([{ src: 'img1', legend: 'leg1' }, yourCondition && { src: 'img2', legend: 'leg2 }, { src: 'img3', legend: 'leg3' }]);
const slides = _.map(images, slide => <div><img src={slide.src} /><p>{slide.legend}</p></div>);
...
return <Carousel>{slides}</Carousel>

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.