front/src/Components/Vegetables.js

import React from 'react';
import {
  ListGroup,
  ListGroupItem,
} from 'reactstrap';
import {
  Link,
} from 'react-router-dom';
import strToSlug from '../StrToSlug';

import '../css/Vegetables.css';

export default class Map extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      selectedType: this.props.selectedType,
      selectedVegetable: this.props.selectVegetable,
    };
  }

  componentWillReceiveProps(newProps) {
    this.setState(newProps);
  }

  createLink(vegetable) {
    let url = '/vegetaux/';
    if (vegetable.Type) {
      url += `${vegetable.Type.id}-${strToSlug(vegetable.Type.name)}`;
    } else {
      url += `${this.state.selectedType.id}-${strToSlug(this.state.selectedType.name)}`;
    }
    url += `/${vegetable.id}-${strToSlug(vegetable.name)}`;

    return url;
  }

  render() {
    return (
      <div className="with-margin">
        <div className=" with-border with-background">
          <ListGroup className="vegetables--types--group">
            {
              this.state.selectedType
              && this.state.selectedType.Vegetables
              && this.state.selectedType.Vegetables.map((vegetable, key) => (
                <ListGroupItem
                  key={key}
                  className={this.state.selectedVegetable.id === vegetable.id ? 'selected' : 'null'}
                  onMouseOver={e => this.props.selectVegetable(vegetable)}
                >
                  <Link to={this.createLink(vegetable)}>
                    {vegetable.name}
                  </Link>

                </ListGroupItem>
              ))
            }
          </ListGroup>
        </div>
      </div>
    );
  }
}