Riempire una Dropdown in PrimeReact

PrimeReact è una libreria UI per React.

La sto testando per un'applicazione e mi ci sto trovando bene.

Il sito è pieno di esempi, ma come al solito qualcosa di oscuro ogni tanto c'è.

Oggi vediamo come riempire una Dropdown da un JSON remoto.

Per la richiesta HTTP useremo Axios, e do per scontato la sua installazione.

Partiamo dal JSON remoto:

{
    "allenamenti_tipi": [
        {
            "value": "38",
            "label": "Allenamento"
        },
        {
            "value": "45",
            "label": "Arrampicata"
        },
        {
            "value": "50",
            "label": "Arrampicata su roccia"
        },
        {
            "value": "43",
            "label": "Bicicletta"
        }
    ]
}

I dati sono creati da un web service; la cosa importante è che i campi abbiano i nomi value e label, altrimenti la Dropdown andrà in errore.

Non so se c'è un'opzione per modificare questo comportamento, ma non l'ho trovata.

Adesso nella nostra pagina avremo una cosa del genere:

import React, {Component} from 'react';
import {Dropdown} from "primereact/dropdown";

export class AggiungiAllenamento extends Component {

    constructor(props) {
        super(props);

        this.state = {
            tipi: [],
            selAllenamento: null
        };
    }

    async componentDidMount() {
		await axios.get('https://www.mattepuffo.com/api/sport/allenamenti_tipi/get.php')
            .then(res => {
                this.setState({tipi: res.data.allenamenti_tipi});
            });
    }

    render() {
        return (
            <div>
                <div className="p-grid p-fluid">
                    <div className="p-col-12">
                        <div className="card card-w-title">
                            <div className="p-col-12">
                                <Dropdown options={this.state.tipi} autoWidth={false} value={this.state.selAllenamento}
                                          onChange={event => this.setState({selAllenamento: event.value})}/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

Notate che come value impostiamo uno state; che poi cambia con il metodo onChange.

Tutti i componenti form di PrimeReact si comportano in questa maniera; può sembrare strano, ma alla fine è un comportamento coerente con React.

Enjoy!