CODEWITHSUNDEEP
reactjsjsx
knicholas28
knicholas28

Reputation: 23

React: Display unordered lists in bootstrap carousel items from array

very new to React (and not really efficient at JS in general) and could use some guidance on how to set this up. I'm trying to render an unordered list in individual carousel items from an array, using React/JSX. As of right now, I have the carousel working just fine, but I'm at a loss on how to group the array items into separate lists.

My Code: 

$('.carousel-inner>.item:first-child').addClass('active');

const carouselItems = [
    'This is a carousel text message 1',
    'This is a carousel text message 2',
    'This is a carousel text message 3',
    'This is a carousel text message 4',
    'This is a carousel text message 5',
    'This is a carousel text message 6'
];

const carouselTest = carouselItems.map((word, idx) => { return <div className='item' key={idx}><ul><li>{word}</li></ul></div>})

ReactDOM.render(
    <div id="carousel-example-generic" className="carousel slide" data-ride="carousel" data-interval="false">
        <div className="carousel-inner">
            {carouselTest}
        </div>
    </div>, document.getElementById('carousel_facts')
);
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

<div id="carousel_facts"></div>

<div class="controls testimonial_control">
<a class="left fa fa-chevron-right btn btn-default testimonial_btn" href="#carousel-example-generic" data-slide="prev">Previous</a>
  <a class="right fa fa-chevron-right btn btn-default testimonial_btn" href="#carousel-example-generic" data-slide="next">Next</a>
</div>

From my code, I'd like to separate text 1-3 and 4-6 into two separate carousel items, so the end result would look something like this.

<div class="item active">
  <ul>
    <li>This is a carousel text message 1</li>
    <li>This is a carousel text message 2</li>
    <li>This is a carousel text message 3</li>
  </ul>
</div>
<div class="item">
  <ul>
    <li>This is a carousel text message 4</li>
    <li>This is a carousel text message 5</li>
    <li>This is a carousel text message 6</li></ul>
</div>

Am I going to have to make multiple variables in order to accomplish this, or am I going about this the wrong way entirely? Any help would be appreciated. Thanks.

Upvotes: 2

Views: 307

Answers (1)

Igor Doroshenko
Igor Doroshenko

Reputation: 191

import React from "react";
import ReactDOM from "react-dom";

const firstList = [
    "This is a carousel text message 1",
    "This is a carousel text message 2",
    "This is a carousel text message 3"
]

const secondList = [
    "This is a carousel text message 4",
    "This is a carousel text message 5",
    "This is a carousel text message 6"
]

ReactDOM.render(
    <div id="carousel-example-generic" className="carousel slide" data-ride="carousel" data-interval="false">
        <div className="carousel-inner">
            <div className="item active">
               <ul>
                  {
                      firstList.map((item, idx) => <li key={idx}>{item}</li>)
                  }
               </ul>
            </div>
            <div className="item">
               <ul>
                  {
                      secondList.map((item, idx) => <li key={idx}>{item}</li>)
                  }
               </ul>
            </div>
        </div>
    </div>, document.getElementById('carousel_facts')
)

Upvotes: 1

Related Questions