Custom Gutenberg Block with Slider - block

Question

I'm creating a Gutenberg block for a slider using Boostrap. I can't figure out how I can go about inserting the "active" class only on the first post inside the loop, any suggestions would be appreciated, thanks.
This is my Edit file:
import { Component, RawHTML } from "#wordpress/element";
import { RichText, BlockControls, InspectorControls, AlignmentToolbar} from "#wordpress/editor";
import { __ } from "#wordpress/i18n";
import { withSelect } from "#wordpress/data";
import { decodeEntities } from "#wordpress/html-entities";
import { Toolbar, PanelBody, BaseControl, ColorPicker, FontSizePicker, RangeControl, TextControl, SelectControl } from "#wordpress/components";
import { dateI18n, format, __experimentalGetSettings } from '#wordpress/date';
class SliderEdit extends Component {
onChangeCategories = (categories) => {
this.props.setAttributes({postCategories: categories.join(',')})
}
onChangeNumberOfPosts = (numberOfPosts) => {
this.props.setAttributes({numberOfPosts})
}
render() {
const { className, attributes, setAttributes, categories, posts} = this.props;
const {
postCategories,
numberOfPosts,
} = attributes;
const dateFormat = __experimentalGetSettings().formats.date;
return(
<>
<InspectorControls>
<PanelBody
title={__('Loop Settings', 'df-slider-b')}
>
<div class="df-cat-multiple">
<SelectControl
multiple
label={__("Categories","df-blocks")}
help={__('You can select multiple categories!','df-blocks')}
onChange={this.onChangeCategories}
options={categories && categories.map(category => ({value: category.id, label: category.name}))}
value={postCategories && postCategories.split(',')}
/>
</div>
<RangeControl
label={__("Number of Posts","df-blocks")}
help={__('Set -1 to get all posts','df-blocks')}
value={ numberOfPosts }
onChange={ this.onChangeNumberOfPosts }
min={-1}
max={10}
/>
</PanelBody>
</InspectorControls>
{(posts && posts.length > 0) ?
<div id="carouselDFControls" class="df_height_carousel_block carousel slide" data-ride="carousel">
<div class="carousel-inner">
{posts.map( post=> (
<>
{post && post._embedded && post._embedded['wp:featuredmedia'] &&
<div class="carousel-item active">
<img src={ post._embedded['wp:featuredmedia'][0].source_url } />
</div>
}
</>
))}
<a class="carousel-control-prev df-carousel-control-prev" href="#carouselDFControls" role="button" data-slide="prev">
<i class="icon-arrow-left"></i>
</a>
<a class="carousel-control-next df-carousel-control-next" href="#carouselDFControls" role="button" data-slide="next">
<i class="icon-arrow-right"></i>
</a>
</div>
</div>
: <div>{posts ? __("No posts found","df-blocks") : __("Loading...","df-blocks")}</div>
}
</>
)
}
}
export default withSelect(
(select, props) => {
const { attributes } = props;
const { numberOfPosts, postCategories } = attributes;
let query = { per_page: numberOfPosts}
if(postCategories) {
query['categories'] = postCategories;
}
return {
posts: select('core').getEntityRecords('postType', 'post',{_embed: true} ),
posts: select('core').getEntityRecords('postType', 'post', query ),
categories: select('core').getEntityRecords('taxonomy','category', {per_page: -1})
}
}
)(SliderEdit);
If I don't add the "active" class in the first post the carousel doesn't work.
Regards
Denis

Answer 1

You can use the index param in your map function. If the index is 0 it is the first item in the loop.
{ posts.map( ( post, index ) => (
<div className={ `carousel-item${ index === 0 ? ' active' : '' }` }>
...
</div>
) }
Also, you want to use className instead of class in React.