react-slick carousel somehow adding link to every image

Question

I am working on a Gatsby project and am having issues with a homepagebanner. Using react-slick which works ok, but adding content on top of each pictures is causing problems. Setting a link for the second picure ("golflink") is resulting in every image now being clickable leading to this href. Can someone help rewrite so only the second image is leading to the event page?

link to index page with banner below navbar https://zen-aryabhata-bd8020.netlify.app/

Thank you in advance.

import "slick-carousel/slick/slick.css"; 
import "slick-carousel/slick/slick-theme.css";
import Slider from "react-slick"
import { Link } from "gatsby";

import "../styles/bannerstyles.css"

import banner_image_1 from '../img/banner1.jpg'
import banner_image_2 from '../img/golferin.jpg'
import banner_image_3 from '../img/baby.jpg'
import golf_cup_logo from '../img/golf_cup_logo.png'


const photos = [
    {
    id: '1',
    url: banner_image_1,
    css_id: "banner-image-one",
    heading: 'unsere mission',
    description: 'Lebensrettende Hilfe für die Schwächsten',
    link: "/projekte",
    link_text: "mehr erfahren",
    },
    {
    id: '2',
    url: banner_image_2,
    css_id: "banner-image-two",
//  description: 'Dabei sein und (Golf-) spielend Gutes tun!',
    link_text: "mehr erfahren",
    link: "/events#golf-turnier",
    badge: golf_cup_logo,
    golflink: "/events#golf-turnier"
    },
    {
    id: '3',
    url: banner_image_3,
    css_id: "banner-image-three",
    heading: 'unsere projekte',
    description: 'Hilfe, die dort ankommt, wo sie am dringensten gebraucht wird!',
    link: "/projekte",
    link_text: "mehr erfahren"
    }
]


class HomepageBanner extends Component{
    render(){
    const settings = {
        dots: true,
        fade: true,
        infinite: true,
        slidesToShow: 1,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 5000,
    }
    return (
        <div id="homepagebanner">
        <Slider {...settings}>
            {photos.map((photo) => {
            if (photo.id = 1) {
            return (
            <a href="/events#golf-turnier">
                <div id="homepagebanner-img-container">
                <img id="homepagebanner-img" width="100%" alt="homepagebanner-image" src={photo.url} />
                <div className="homepagebanner-text" id={photo.css_id}>
                    <div>
                <img src={photo.badge} width="100%" position="absolute" className="banner-badge"/>
            </div>
                <h1>{photo.heading}</h1>
                <p>{photo.description}</p>
                <a className="banner-link" href={photo.link}>{photo.link_text}</a>
                </div>
                </div>
                </a>
            )
            } else {
            return(
                <div id="homepagebanner-img-container">
                <img id="homepagebanner-img" width="100%" alt="homepagebanner-image" src={photo.url} />
                <div className="homepagebanner-text" id={photo.css_id}>
                <h1>{photo.heading}</h1>
                <p>{photo.description}</p>
                <a className="banner-link" href={photo.link}>{photo.link_text}</a>
                </div>
                </div>
            )
            }
        })}
        </Slider>
        </div>
    )
    }
}

export default HomepageBanner

score 0 · Answer 1 · answered Jan 14 '22 at 16:17

0

You have hardcoded the link value <a href="/events#golf-turnier"> thats wrapped around everything including a link.

Also your if statement should be if (photo.id == 1) {

answered Jan 14 '22 at 16:17

Wakka

426
1
9

score 0 · Answer 2 · answered Jan 14 '22 at 16:34

You are assigning a value in a condition instead of comparing values:

(photo.id = 1)

Should be:

(photo.id === 1)

Even == will work but for coersion better use ===

In addition, you are missing the key attribute in each rendered element. The key helps React identify which items have changed, are added, or are removed and it should be a unique value, so the photo.id fits perfectly its definition.

Your final code should look like:

return (
  <div id="homepagebanner">
    <Slider {...settings}>
      {photos.map((photo) => {
        if (photo.id === 1) {
          return (
            <a href="/events#golf-turnier" key={photo.id}>
              <div id="homepagebanner-img-container">
                <img id="homepagebanner-img" width="100%" alt="homepagebanner-image" src={photo.url} />
                <div className="homepagebanner-text" id={photo.css_id}>
                  <div>
                    <img src={photo.badge} width="100%" position="absolute" className="banner-badge" />
                  </div>
                  <h1>{photo.heading}</h1>
                  <p>{photo.description}</p>
                  <a className="banner-link" href={photo.link}>{photo.link_text}</a>
                </div>
              </div>
            </a>
          );
        } 
        return (
          <div id="homepagebanner-img-container" key={photo.id}>
            <img id="homepagebanner-img" width="100%" alt="homepagebanner-image" src={photo.url} />
            <div className="homepagebanner-text" id={photo.css_id}>
              <h1>{photo.heading}</h1>
              <p>{photo.description}</p>
              <a className="banner-link" href={photo.link}>{photo.link_text}</a>
            </div>
          </div>
        );
        
      })}
    </Slider>
  </div>
);

More details about key: https://reactjs.org/docs/lists-and-keys.html

react-slick carousel somehow adding link to every image

2 Answers2