Comparing mapped items for additional output using React

Question

I have a standard mapped element using React. My render is below:

    render() {
    const { timeLineData } = this.props;
    const dateOrder = _.sortBy(timeLineData, function (o) { return new moment(o.createdDate) }).reverse();

    return (
        <div className="timeline-section">
            {dateOrder.map((status, index) => (
                <div key={index}> 
                    <div className="timeline-badge"></div>
                    <div className="timeline-panel">
                        <p>{moment(status.createdDate).format('ll')}</p>
                        <h2 className="timeline-title"><strong>{status.status}</strong></h2>
                        <p>{progressed}?</p>
                    </div>
                </div>
            ))}
        </div>
    );
}

My data called timeLineData is being ordered by data and being mapped in that order. Here is the output:

timeLineData: [
0:{
createdDate: "2018-06-08T00:00:00"
status: "ON TARGET"}
1:{
createdDate: "2017-06-08T00:00:00"
status: "FOLLOW"}
2:{
createdDate: "2016-06-08T00:00:00"
status: "DO NOT FOLLOW"}
]

My UI renders a timeline thats ordered by date and shows a status of progess. I would like an additional field on my UI to notify the user if they have progressed/or regressed from a previous date. The 3 status' in the example are [1:'ON TARGET', 2:'FOLLOW', 3:'DO NOT FOLLOW'] these are in order of progression e.g ON TARGET is a progression from FOLLOW.

So I need the mapping process to look at the status of the item previous and render an attribute if there has been progression, regression or no change. I imagine that the rank would need to be set and each status given a value, then a lookup whilst the mapping was taking place?

Answer 1

If you expand your map parameters to include array, you can easily check the previous item using index. Below is just a basic outline of the sort of thing you could do. I've included a bit that checks to see if you're at the the beginning of the array as it is required that you have a previous item to compare to. Hope it helps!

{dateOrder.map((status, index, array) => {
    // Setup goes here
    const previousStatus = array[index-1].status
    // If previousStatus returns undefined, it can be used to check if there's a previous item to compare to.
    return (
        // The rest of your code
        {(previousStatus && previousStatus === 'something')
            ? null
            : <div>{"The thing that you want"}</div>} 
    )
}}