How to have a link of js array and img src in React-CodePudding

I have a React component that maps data from a .js file, containing objects in the array. How can I link my title and images from within this function to access respective pages?

In this file, I am getting errors for every [x] used for linking img src to the info.js file Is there a different way to link an img from a js array?

import React from "react";
import Header from "./Header";
import Footer from "./Footer";
import Card from "./Card";
import Btt from "./BackToTop";
import info from "../info";

function Bolt() {
    return(
        <div>
            <Header />
            <div>
            <h1 className="projHead">Bolt</h1>
            <div className="card-img-top"><img src={info.[1].src} alt="" className="banner"></img> 
            </div>
            </div>

            <div className="text1">
                <h3>Mind Map</h3>
            </div>
            <div className="card-img-top"><img src={info.[1].pic1} alt="" className="isoimg"></img></div>

            <div className="card-img-top"><img src={info.[1].pic2} alt="" className="isoimg"></img></div>

            <div className="card-img-top"><img src={info.[1].pic3} alt="" className="isoimg"></img></div>

            <div className="card-img-top"><img src={info.[1].pic4} alt="" className="isoimg"></img></div>

            <div className="text1">
                <h3>Screen Layouts</h3>
            </div>
            <div className="card-img-top"><img src={info.[1].pic5} alt="" className="isoimg"></img></div>

            <div className="text1">
                <h3>Mockups</h3>
            </div>
            <div className="card-img-top"><img src={info.[1].pic6} alt="" className="smallisoimg"></img></div>

            <Btt />   
            <Footer />
        </div>
    );
}

export default Bolt;

this is the JS file for content

const info = [
    {
        id:    1,
        title: "AR mirror",
        about: "Smart Exercise Mirror is an IOT product. It helps the user to have a gym-like experience at their home with the help of AR and image recognition technology. ",
        src:   "images/AR_Mirror/AR_mirror.png",
        tag1: "UX & Product design",
        link: "/ARmirror",
        targ: "_self",
        pic1: "images/AR_Mirror/ar1.jpg",
        pic2: "images/AR_Mirror/ar2.png",
        pic3: "images/AR_Mirror/ar3.png",
        pic4: "images/AR_Mirror/ar4.png",
        pic5: "images/AR_Mirror/ar5.gif",
        pic6: "images/AR_Mirror/ar6.png",
        vid: "images/AR_Mirror/AR_mirror.MOV",
    },

    {
        id:    2,
        title: "Bolt",
        about: "Bolt is an app for electric bikes which allows user to monitor the bike from remote distance and functions as a control panel.",
        src:   "images/Bolt/Bolt.jpg",
        tag1: "UX design",
        link: "/Bolt",
        targ: "_self",
        pic1: "images/Bolt/bs1.png",
        pic2: "images/Bolt/bs2.png",
        pic3: "images/Bolt/bs3.png",
        pic4: "images/Bolt/bs4.png",
        pic5: "images/Bolt/bs5.png",
        pic6: "images/Bolt/bs6.gif",
    }
    
];

export default info;

CodePudding user response：

I believe, this syntax (info.[1]) is wrong. That's why you have errors. You should change it to info[1]. Thats orthodox way of accessing array elements by their indices.

Other than this, you should better use map or foreach iterating over array.

CodePudding user response：

In that case just replace

info.[1].pic1

info?.[1]?.pic1

If you doing it static then its fine. But in future if you are using more data it will be better to use For-loop or Map because it's better way to use array data