CODEWITHSUNDEEP
javascriptreactjsreactstrap
aditya kumar
aditya kumar

Reputation: 3023

How to add classNames in conditional rendering in reactjs?

I have a list of data with images. I want to make image carousel. For this I have created card component and I want here to display 4 cards at a time and remaining should be hidden. Then i want to setTimeout of 5s to display remaining but only for at a time.
So far I have done this.

about.js

import './about.scss';
import data from '../../data/data';
import CardSection from './card';


class About extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            properties: data.properties,
            property: data.properties[0]
        }
    }

    nextProperty = () => {
    const newIndex = this.state.property.index+4;
    this.setState({
      property: data.properties[newIndex]
    })
  }

  prevProperty = () => {
    const newIndex = this.state.property.index-4;
    this.setState({
      property: data.properties[newIndex]
    })
  }

    render() {
        const {property, properties} = this.state;
        return (
            <div className="section about__wrapper">
            <div>
            <button 
            onClick={() => this.nextProperty()} 
            disabled={property.index === data.properties.length-1}
            >Next</button>
            <button 
            onClick={() => this.prevProperty()} 
             disabled={property.index === 0}
            >Prev</button>
            <Container className="card__container">    
            <div class="card__main" style={{
                'transform': `translateX(-${property.index*(100/properties.length)}%)`
            }}>
                {
                    this.state.properties.map(property => (
                        <CardSection property={property}/>
                    ))
                }
            </div>
            </Container>    
            </div>
        </div>
        )
    }
}
export default About

about.scss

.card__container{
        overflow-x: hidden;
    }
    .card__main{
        display: flex;
        position: absolute;
        transition: transform 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
        .card__wrapper {
            padding: 20px;
            flex: 1;
            min-width: 300px;
        }
    }

card.js

import React from "react";
import { Card, CardImg, CardText, CardBody,
  CardTitle, CardSubtitle, Button } from 'reactstrap';
class CardSection extends React.Component {
  render() {
    return (
      <div className="card__wrapper">
      <Card>
                <CardImg top width="100%" src={this.props.property.picture} alt="Card image cap" />
        <CardBody>
                    <CardTitle>{this.props.property.city}</CardTitle>
                    <CardSubtitle>{this.props.property.address}</CardSubtitle>
          <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
          <Button>Button</Button>
        </CardBody>
      </Card>
        </div>
    );
  }
}

export default CardSection;

I have added transition in them to change card onclick but i want them to auto change and hide the remaining card.

Right now it looks like this,

error

Upvotes: 0

Views: 217

Answers (2)

naib khan
naib khan

Reputation: 1118

You can add items in componentDidMount method using setInterval 

    componentDidMount() {
      this.interval = setInterval(() => this.setState({
                                         properties:data.properties /* add your data*/ }), 4000);
    }
    componentWillUnmount() {
      clearInterval(this.interval);
    }

Upvotes: 1

bitsapien
bitsapien

Reputation: 1833

You can have a property called showCardIds that holds an array of the Id of cards that need to be shown, and use that to set a Boolean property called hidden on the div of the card.

You could also do something like this as shown in the example below, this example also uses showCardIds as a state. It filters only for the property that needs to be rendered and filters out the rest. Here is an example:

...
                {
                    this.state.properties.filter((property, index) => showCardIds.includes(index)).map(property => (
                        <CardSection property={property}/>
                    ))
                }
...

That way only the ones that are present in the array of showCardIds would show up, there needs to be more logic to be written that would populate the ids in showCardIds

Hope this helps. The hidden property is supported from HTML5, and should work on most browsers, unless they are truly "ancient".

Upvotes: 0

Related Questions