React - if -> then x50

Witajcie. W moim testowym projekcie będę miał kilkanaście/kilkadziesiąt przycisków, wszystkie są generowane z kolekcji własności, gdzie każda jest przypisana do odpowiedniego pola, po kilka na raz. Poniżej przykład:

export const pola= [
    {
        id: uuid.v4(),
        p: 'pole1',
        r: [
            'previous',
            'btn1-1',
            'btn1-2',
            'btn1-3',
            'btn1-4'
        ]
    },
    {
        id: uuid.v4(),
        p: 'pole2',
        r: [
            'previous',
            'btn2-1',
            'btn2-2',
            'btn2-3'
        ]
    },
    {
        id: uuid.v4(),
        p: 'pole3',
        r: [
            'previous',
            'btn3-1',
            'btn3-2'
        ]
    },
    {
        id: uuid.v4(),
        p: 'pole4',
        r: [
            'previous',
            'btn4-1',
            'btn4-2'
        ]
    }
]

Z każdego pola mapowane są przyciski:

render() {
        var fieldList= pola.map(klik=> {
            return (
                klik.r.map(value => {
                    return (
                        <div>
                            <button
                                value={value}
                                onClick={this.onButtonClick}>
                            {value}
                         </button>
                         </div>
                    );
                })
            );
        });

Chcę, aby onButtonClick dla każdego przycisku wyświetlał wybrane pole. Na przykład, po wciśnięciu btn4-1 będzie wyświetlone pole {pola[5].p} wraz z jego przyciskami.

Chcę uniknąć korzystania z dziesiątków if-ów, ale nie mam pomysłu na stworzenie generycznego warunkowania. Jedyne co mi na razie przychodzi do głowy to stworzenie tablicy 2D zawierającej btnx-x, pola[x] itd. Może będziecie mieli lepszy pomysł w co uzbroić onButtonClick? Zaczynam dopiero z React i JS, stąd moja konsternacja.

Możesz dodać kolejny atrybut do obiektów z własnościami, który będzie zawierał namiary na docelowe pole.
Następnie po kliknięciu w dowolny przycisk wyciągaj ten atrybut i wykonuj akcję wyświetlania pola.

orkin napisał(a):

Możesz dodać kolejny atrybut do obiektów z własnościami, który będzie zawierał namiary na docelowe pole.
Następnie po kliknięciu w dowolny przycisk wyciągaj ten atrybut i wykonuj akcję wyświetlania pola.

Tak właśnie zrobię. Udało mi się na razie ulepszyć kolekcję i ją renderować zgodnie z oczekiwaniami. Myślę, że z eventami już nie będę miał dalej problemów. Dzięki!