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!
javascript react primereact dropdown json axios
Commentami!