I'm mapping an array to have the Link which gonna direct me to modify one row of the table

This is my DepotList Component :

import React from 'react';
import { Link } from 'react-router-dom';
import Table from '../../../Common/Table';
import { textFilter } from 'react-bootstrap-table2-filter';

const DepotList = props => {
    const { depots } = props;
    const columns = [
        {
            dataField: 'name',
            text: 'nom depot',
        },
        {
            dataField: 'adress',
            text: 'adresse',
            sort: true,
        },
        {
            dataField: 'size',
            text: 'Taille depot',
        },
        {
            dataField: 'equipements',
            text: 'Equipements',
        },
        {
            dataField: 'updated',
            text: 'Mis à jour',
        },
        {
            dataField: '',
            text: 'Actions',
            formatter: () => {
                return (
                    <>
                        {depots.map((depot, index) => (
                            <div>
                                <Link
                                    className=""
                                    to={`/gestion-depots/edit/${depot._id}`}
                                    key={index}
                                >
                                    {console.log(`index ${depot._id}`)}
                                    Modifier
                                </Link>
                            </div>
                        ))}
                    </>
                );
            },
        },
    ];

    return (
        <>
            <p>{depots.length} Depots</p>

            {console.log('depotlist ----', depots)}

            <Table data={depots} columns={columns} csv search filter />
        </>
    );
};

export default DepotList;

But I'm getting n links in every action row like this :

And if i click the link it works perfectly lol : first link first row , second link second row ..etc

Can anyone help me to fix this problem !!

CodePudding user response：

depots is probably an array and in the last index of your columns you are mapping it with "Modifier" as its inner text.

    formatter: () => {
        return (
            <>
                {depots.map((depot, index) => (
                    <div>
                        <Link
                            className=""
                            to={`/gestion-depots/edit/${depot._id}`}
                            key={index}
                        >
                            {console.log(`index ${depot._id}`)}
                            Modifier
                        </Link>
                    </div>
                ))}
            </>
        );
    },

Can you also share the table component, and the depots array list.

CodePudding user response：

You are mapping all your depots array in your formatter so in each row you got all the links

I'm not sure of the logic you implemented in your Table component but you probably can solve the problem changing your last element of columns in this way

{
            dataField: '_id',
            text: 'Actions',
            formatter: (_id) => {
                return (
                            <div>
                                <Link
                                    className=""
                                    to={`/gestion-depots/edit/${_id}`}
                                    key={index}
                                >
                                    {console.log(`index ${_id}`)}
                                    Modifier
                                </Link>
                            </div>
                 
                );
            },
        },

all you have to change is the parameters that you are passing to formatter in your table component based on the datafield

or you can pass the whole item to formatter and do your extraction on the single item