使用 React Router Dom 传递道具以导航数组的每个元素？

Question

I'm trying to pass the props i have on the array.map function i'm using, since the array.map is creating buttons and each one of them navigates to the same screen, i just want to pass them the specific props of each position, like if they click on the button with the id 25 to give the navigate the info that position has, to show it on the next screen

The props look like below. They're on their own file and it's not the whole thing, but it literally has 30 ids so it's way too long and one id gets the idea across.

[
    {
        id: 1, 
        num_aula: '1', 
        horario_retiro: '2:00 ', 
        año: '1°', 
        division: '1°',
        estado: 'sucio',
    },
]

Here's what the code of the Component that's passing props looks like:

import React from "react";
import Button from 'react-bootstrap/Button';
import {aulas} from '../props/aulas';
import Container from 'react-bootstrap/Container';
import { Route, useNavigate } from "react-router-dom";

export default function AdministrarCurso_Portero(){
    const navigate= useNavigate();
    return(
        <Container> 
            <div className="row">
                {/* Acá hay botones que se generan en base a la cantidad de props que haya en el array map
                Que te redireccionan a la pantalla de Limpiar Curso, por ahora no le pasa los valores que tenga
                 */}
            {aulas.map((aula, i)  => (
                <div key={i} className="col-md-4">
                <Button onClick={()=> navigate('/LimpiarCurso',{state: {id:i,num_aula:num_aula,año:año,division:division,horario_retiro:horario_retiro}})}>{aula.año}{aula.division}</Button>
                </div>
            ))}
            </div>
        </Container>
    )
}

And the code from the Component that should receive the props to show them:

import React from "react";
import { View} from 'react-native';
import CheckCircle from '@mui/icons-material/CheckCircle'
import styles from '../../App';
import { GiBroom } from 'react-icons/gi';
import { Route, useLocation, useNavigate } from "react-router-dom";
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import Button from 'react-bootstrap/Button';

export default function LimpiarCurso(){
    const { state } = useLocation();
    const {num_aula, año, division, horario_retiro} = state;
    const navigate= useNavigate();
    return (
        <div>
        <Container>
            <Row>
                <Col></Col>
            </Row>
        </Container>
        <Container>
            <Row>
                <Col ><CheckCircle sx={{ fontSize: 200, color: 'white', backgroundColor:'green'}} style={{float: 'right'}}/></Col>
                <Col ><GiBroom size={200} style={{float: 'right'}}/></Col>
                            </Row>
        </Container>
        <Container>
            <Row>
                <Col ></Col>
                <Col><Button onClick={()=> navigate('/AdministrarCurso_Portero')}>Volver</Button></Col>                
                <Col ></Col>
            </Row>
        </Container>
        </div>
    )
}

Maybe there's an easy solution to this, but i haven't really grasped the use of array map or props yet.

Answer 1

Using map is the correct way since you are rendering an array. What you are doing wrong is that you have for example num_aula:num_aula while it should be num_aula:aula.num_aula . Try this:

{aulas.map((aula)  => (
  <div key={aula.id} className="col-md-4">
  <Button onClick={()=> navigate('/LimpiarCurso',{state: {id:aula.id,num_aula:aula.num_aula,año:aula.año,division:aula.division,horario_retiro:aula.horario_retiro}})}>{aula.año}{aula.division}</Button>
  </div>
))}