Populating multiple elements through map function

[Shubham-luv2code]

getIconClass(val) {
        var iconClass = '';
        switch (val) {
            case 'initialize':
                iconClass = "fa fa-3x fa-hourglass-start"
                break;
            case 'progress':
                iconClass = "fa fa-3x fa-caret-square-o-down"
                break;
            case 'email':
                iconClass = "fa fa-3x fa-envelope"
                break;
            case 'end':
                iconClass = "fa fa-3x fa-hourglass-end"
                break;
            default:
                iconClass = "fa fa-3x fa-caret-square-o-down"
                break;

        }
        return iconClass;
    }
    renderTimelineElements() {
        const { apiRes } = this.state;
        apiRes.StaticWorkflowRes.forEach((element, ind) => {
            if (element.reqType === this.props.reqTypeId) {
                element.steps.map((eleMap, ind) => {
                    var iconClass = this.getIconClass(eleMap.stepType);
                    return (
                    <VerticalTimelineElement
                        key={ind}
                        className="vertical-timeline-element"
                        contentStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
                        contentArrowStyle={{ borderRight: '7px solid  rgb(33, 150, 243)' }}
                        date={`Step ${ind + 1}`}
                        iconStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
                        icon={<i className={iconClass}
                            style={{
                                'position': 'absolute',
                                'right': '11px',
                                'top': '10px'
                            }}></i>}
                    >
                        <div>
                            <h3 className="vertical-timeline-element-title">{eleMap.titleVal}</h3>
                            <h4 className="vertical-timeline-element-subtitle">{eleMap.subtitleVal}</h4>
                            <p>{eleMap.stepDesc}</p>
                        </div>
                    </VerticalTimelineElement>
                    )
                })
            }
        });
    }
    render() {
        return (
            <React.Fragment>
                <VerticalTimeline animate={true}>
                    {this.renderTimelineElements()}
                </VerticalTimeline>
            </React.Fragment>
        )
    }

[Shubham-luv2code]

I already saw https://github.com/stephane-monnot/react-vertical-timeline/issues/17. But this doesn't seem to be working. Tried your given dummy function too

[stephane-monnot]

I tried it, it works as expected. Could you provide a full example ?

[Shubham-luv2code]

`

import { VerticalTimeline, VerticalTimelineElement } from 'react-vertical-timeline-component';
import React from "react";
import StaticWorkflow from "./StaticWorkflow.json";
export default class RequestTimeline extends React.Component {
    constructor(props) {
        super();
        this.state = {
            apiRes: StaticWorkflow
        }
       // this.iconOnClick = this.iconOnClick.bind(this)
        this.renderTimelineElements = this.renderTimelineElements.bind(this)
        this.getIconClass = this.getIconClass.bind(this)
    }
    // iconOnClick(e) {
    //     this.setState({ showIcons: true })
    // }
    getIconClass(val) {
        var iconClass = '';
        switch (val) {
            case 'initialize':
                iconClass = "fa fa-3x fa-hourglass-start"
                break;
            case 'progress':
                iconClass = "fa fa-3x fa-caret-square-o-down"
                break;
            case 'email':
                iconClass = "fa fa-3x fa-envelope"
                break;
            case 'end':
                iconClass = "fa fa-3x fa-hourglass-end"
                break;
            default:
                iconClass = "fa fa-3x fa-caret-square-o-down"
                break;
        }
        return iconClass;
    }

renderTimelineElements() {
    const { apiRes } = this.state;
    apiRes.StaticWorkflowRes.forEach((element, ind) => {
        if (element.reqType === this.props.reqTypeId) {
            element.steps.map((eleMap, ind) => {
                var iconClass = this.getIconClass(eleMap.stepType);
                return (
                <VerticalTimelineElement
                    key={ind}
                    className="vertical-timeline-element"
                    date={`Step ${ind + 1}`}
                    iconStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
                    icon={<i className={iconClass}></i>}
                >
                    <div>
                        <h3 className="vertical-timeline-element-title">{eleMap.titleVal}</h3>
                        <h4 className="vertical-timeline-element-subtitle">{eleMap.subtitleVal}</h4>
                        <p>{eleMap.stepDesc}</p>
                    </div>
                </VerticalTimelineElement>
                )
            })
        }
    });
}
render() {
    return (
            <VerticalTimeline animate={true}>
                {this.renderTimelineElements()}
            </VerticalTimeline>
    )
}

}`

[Shubham-luv2code]

StaticWorkflow.json for sample response

{ "StaticWorkflowRes": [ { "reqType": "Sample Request", "steps": [ { "titleVal": "Request Creation", "subtitleVal": "A New Request Would be created as a first step", "stepDesc": "To create a new request, user has to fill all the details required on the App as required", "stepType": "initialize" }, { "titleVal": "Request Submission", "subtitleVal": "A New Request will be submitted", "stepDesc": "Ticket details will be generated once the details are filled correctly and same will be stored in database", "stepType": "progress" }, { "titleVal": "Email Generation", "subtitleVal": "Email triggered to authorised recipients", "stepDesc": "An Email with the associated ticket details will be sent out to requested parties", "stepType": "email" }, { "titleVal": "Updating Request", "subtitleVal": "Details Can Be Edited", "stepDesc": "Any Submitted Details Can be edited before the batch process these details and file uploads to servers", "stepType": "progress" }, { "titleVal": "Request Processed", "subtitleVal": "File is uploaded successfully", "stepDesc": "Flow of the request ends once file is uploaded successfully on TMS servers", "stepType": "end" } ] } ] }

[Shubham-luv2code]

I keep the global css in my local workspace. I already tried with multiple hardcoded VerticalTimelineElement and it works fine but not with map function

[stephane-monnot]

Did you try to put a console.log of iconClass ?

[stephane-monnot]

If it's not a bug, please use stackoverflow for help.

[Shubham-luv2code]

iconClass works fine. I tried debugging the value of iconClass even I hardcoded/removed iconClass too. But doesn't seem to be working

[stephane-monnot]

I tried :

And I can see class props in source code :

[stephane-monnot]

Inside map : It works as expected.