Метод .map при запуске item.url остается с последним URL на каждой итерации представления, сохраняя при этом изменения от каждого из них

Question

Я пытаюсь перебрать группу элементов, пока они перебираются при возвращении рендера, но по какой-то причине при попытке использовать item.url, но элементы остаются с последним прочитанным путем item.url. Как сделать так, чтобы каждая итерация использовала свой собственный item.url вместо последней из массива объектов.

On line 53 of ./CategoriesListContainer.jsx

class CategoriesListContainer extends React.Component {

  state = {
   redirect: false,
   }
   setRedirect = () => {
    this.setState({
     redirect: true
   })
  }

  render (){
    const ItemsApp =[
      {
        url: '/mail',
        title: 'Mailing',
        description: 'Esto es una descripcion de la carta a usar para el CSV mailing.',
        buttonClass: 'btn-success',

      },
      {
        url: '#',
        title: 'Excels',
        description: 'Esto es una descripcion de la carta a usar para otros modulos.',
        buttonClass: 'btn-success',
      },
    ];
    return(
      <SectionWrapper sectionTitle='Categories'>
        { ItemsApp.map(Item => {
          return (
            <CardWrapper
              key={ Item.title }
              customClass='card'
              description={ Item.description } 
              title={ Item.title }
            > 
              { this.state.redirect ? <Redirect to={ Item.url }/>: null }
              <Button onButtonClick={ this.setRedirect } customClass={ Item.buttonClass } title='Entra aqui' />
            </CardWrapper>
          );
        })}
      </SectionWrapper>
    );
  }
};
export default CategoriesListContainer;

Я ожидаю нажать на каждую из кнопок и перейти на страницу, определенную для ее переменной URL.

Answer 1

В общем, вы хотите что-то вроде этого:

import React, { Component } from 'react';
import { render } from 'react-dom';

class App extends Component {
  state = {
    items: [{ name: 'Colin' }, { name: 'Ricardo' }]
  }

  handleClick = (name) => {
    console.log(name)
  }

  render() {
    const { items } = this.state;
    return (
      <ul>
        {items.map(item => (
          <li
            key={item.name}
            onClick={() => this.handleClick(item.name)}>
            {item.name}
          </li>
        ))}
      </ul>
    )
  }
}

render(<App />, document.getElementById('root'));

Живой пример здесь .