Conditional slide rendering
See original GitHub issueConsider 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>
);
}
});
Issue Analytics
- State:
- Created 5 years ago
- Comments:7 (2 by maintainers)
Top Results From Across the Web
Conditional rendering - SlideShare
Condition Rendering is used to represent output by applying conditions in code with three different approached which is fetched while ...
Read more >Conditionally Rendering Components - Code Like This
Slides. Rendering Components Conditionally. Components can be rendered using If/Else or a Ternary; State within the Class or Function can be used in...
Read more >How to use Conditional Rendering with Animation in React
In this article we will code together an example of conditional rendering in React with a FadeIn/FadeOut effect.
Read more >How to animate conditionally-rendered components?
My component renders button or the sidenav depending on the breakWith prop. Clicking on the rendered button causes the SideNav to slide-in ...
Read more >Conditionally Rendering Components - Bootcamp
React React-Conditional-Rendering. Rendering Components Conditionally. Components can be rendered using If/Else or a Ternary; State within the Class or ...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
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:
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.