How to access next/prev object inside map - react?

Question

I have problem with generate next/prev link inside specific object. It's my code.

someArrCars = [{name: 'somecar1', link: 'somelink1', vin: '123'}, {name: 'somecar2', link: 'somelink2', vin: '345'},...];

generate route:

someArrCars.map( el => <Route path={el.link} component={() => <OnePageCar carVin={el.vin} key={el.vin}/>}

generate links prev/next inside one object

import React, { Component } from "react";

export default class OnePageCar extends Component {
  render() {
    const { carVin } = this.props;

    someArrCars.map((el, index) => {
      if (el.vin === carVin) {
        return (
          <React.Fragment key={el.vin}>
            {someArrCars
              .slice(index - 1, -(someArrCars.length - index))
              .map(el => (
                <Link src={el.link} />
              ))} {/* <== prev*/}
            {someArrCars
              .slice(index + 1, -(someArrCars.length - index - 2))
              .map(el => (
                <Link src={el.link} />
              ))} {/* <== next*/}
          </React.Fragment>
        );
      }
    });
  }
}

I know it's a little crazy idea, but I don't know how to do it in another way...

Sushmit Sagar · Accepted Answer · 2020-02-27 19:13:34Z

2

subtract 1 from current index for the previous element and add 1 to current index to get the next element in an array.

import React, { Component } from "react";

export default class OnePageCar extends Component {
  render() {
    const { carVin } = this.props;

    someArrCars.map((el, index) => {
      const prevEl = someArrCars[index - 1];
      const nextEl = someArrCars[index + 1];

      if (el.vin === carVin) {
        return (
          <React.Fragment key={el.vin}>
            <Link src={prevEl.link} /> {/* <== prev*/}
            <Link src={nextEl.link} /> {/* <== next*/}
          </React.Fragment>
        );
      }
    });
  }
}

answered Feb 27, 2020 at 19:13

Sushmit Sagar

1,5283 gold badges17 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Paul Over a year ago

Thank's, it's working. :) but i have a problem with condition to prevEl. In nextEl i did something like that ```if (nextEl === someArrCars[someArrCars.length]) {nextEl = someArrCars[0]} and i can't figure out how to do it with prevEl.

Paul Over a year ago

ok, i got it. Sorry for a problem! :) solution: if (prevEl === undefined){prev = someArrCars[someArrCars.length-1]}

MD. Samsozzaman Palash · Accepted Answer · 2020-02-27 18:57:42Z

0

Currently map method did not provided that.You can do that using difference way. like the code bellow.

someArrCars.map(el, index) => {
    let prev = someArrCars[index-1];
    let next = someArrCars[index+1];
});

answered Feb 27, 2020 at 18:57

MD. Samsozzaman Palash

11 silver badge4 bronze badges

1 Comment

Paul Over a year ago

i think i don't get it. How can i map prev,next to extract the link?

Vivek Anand · Accepted Answer · 2020-02-27 18:59:06Z

0

The callback of map method accepts 3 arguments:

current item value;
current item index;
the array map was called upon.

So, you could use index to get next element value:

var newArray  = myArray.map(function(value, index, elements) {
  var next = elements[index+1];
  // do something
});

or

var newArray  = myArray.map(function(value, index) {
  var next = myArray[index+1];
  // do something
});

Note, the value of next variable may be undefined. Test the variable, if need, to prevent errors.

answered Feb 27, 2020 at 18:59

Vivek Anand

1,40410 silver badges15 bronze badges

Comments

Paul · Accepted Answer · 2020-02-28 16:36:45Z

unfortunetly i have another problem:

All links generator:

someArrCars.map( el => <Route path={el.link} component={() => <OnePageCar carVin={el.vin} key={el.vin}/>}

I would like to divide the cars into categories and i don't know how to make a category dependent on links.

someArrCars = [{name: 'somecar1', link: 'somelink1', vin: '123', category: 'van'}, {name: 'somecar2', link: 'somelink2', vin: '345', category: 'van'},...];

Example:

<Route exact path={"/van"} component={() => <CarCategory category={"van"}/>}/>

category site:

class CarCategory extends Component{
render(){
const {category} = this.props;

let sortCategory = someArrCars.filter( el => el.category === category );
return(
<>
{sortCategory.map (el => {return (
      <React.Fragment key key ={el.vin}>
           <Link to ={el.link}>Some VAN Car</>
           <Link to ={el.link}>Another VAN Car</>
           <Link to ={el.link}>Next VAN Car</>
)}
</>)
 }
}

After clicking I will have all the cars, i.e. the links will not match the category.

export default class OnePageCar extends Component {
  render() {
    const { carVin } = this.props;

    someArrCars.map((el, index) => {
      if (el.vin === carVin) {
let prev = someArrCars[index-1];
let next = someArrCars[index+1];
  if (next === someArrCars[someArrCars.length]){
      next = someArrCars[0];
      }
      if (prev === undefined){
          prev = someArrCars[someArrCars.length-1];
         }
       }
        return (
        <React.Fragment key={el.vin}>
            <Link src={prevEl.link} />
            <Link src={nextEl.link} /> 
          </React.Fragment>
        );
      }
    });
  }
}

Next/prev button will be wrong in category, because it will be all cars in it.

Collectives™ on Stack Overflow

How to access next/prev object inside map - react?

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related