0
Good afternoon, can someone help me?!
I have the following code:
import React, { Component } from "react";
import SelectMultiple from 'react-native-select-multiple'
import {
Content,
Card,
CardItem,
Text,
Body,
Container,
} from "native-base";
import { LoaderComponent } from '../../../../components';
import { ApiService } from '../../../../services';
export default class Create extends Component {
state = {
campi: [],
loaderVisible: false,
selectedCampi: [],
};
async componentDidMount() {
this.setState({ loaderVisible: true });
await ApiService.get('/campi')
.then((response) => { this.setState({ campi: response.data, loaderVisible: false }); })
.catch((error) => {
this.setState({ loaderVisible: false });
alert(error);
});
}
onSelectionsChange = (selectedCampi) => {
this.setState({ selectedCampi })
}
render() {
return (
<Container>
<LoaderComponent visible={ this.state.loaderVisible } />
<Content padder>
<Card>
<CardItem>
<Body>
<Text>Selecione todos os campi participantes dos jogos.</Text>
</Body>
</CardItem>
<SelectMultiple
items={ this.state.campi.map(c => ({
label: c.nome,
value: c,
}))
}
selectedItems={this.state.selectedCampi}
onSelectionsChange={this.onSelectionsChange}
/>
</Card>
</Content>
</Container>
);
}
}
In the above code I consume an API, which returns me a list of the Campi object, this is the JSON response of the API:
[
{
"id": 21,
"status": "ATIVO",
"nome": "Zona Norte"
},
{
"id": 20,
"status": "ATIVO",
"nome": "Currais Novos"
},
{
"id": 19,
"status": "ATIVO",
"nome": "Cidade Alta"
},
{
"id": 18,
"status": "ATIVO",
"nome": "Lajes"
},
{
"id": 17,
"status": "ATIVO",
"nome": "Ceará Mirim"
},
{
"id": 16,
"status": "ATIVO",
"nome": "Parelhas"
},
{
"id": 15,
"status": "ATIVO",
"nome": "Nova Cruz"
},
{
"id": 14,
"status": "ATIVO",
"nome": "Canguaretama"
},
{
"id": 13,
"status": "ATIVO",
"nome": "São Paulo do Potengi"
},
{
"id": 12,
"status": "ATIVO",
"nome": "Santa Cruz"
},
{
"id": 11,
"status": "ATIVO",
"nome": "Ipanguaçu"
},
{
"id": 10,
"status": "ATIVO",
"nome": "João Câmara"
},
{
"id": 9,
"status": "ATIVO",
"nome": "Apodi"
},
{
"id": 8,
"status": "ATIVO",
"nome": "Reitoria"
},
{
"id": 7,
"status": "ATIVO",
"nome": "Mossoró"
},
{
"id": 6,
"status": "ATIVO",
"nome": "Caicó"
},
{
"id": 5,
"status": "ATIVO",
"nome": "São Gonçalo do Amarante"
},
{
"id": 4,
"status": "ATIVO",
"nome": "Parnamirim"
},
{
"id": 3,
"status": "ATIVO",
"nome": "Macau"
},
{
"id": 2,
"status": "ATIVO",
"nome": "Pau dos Ferros"
},
{
"id": 1,
"status": "ATIVO",
"nome": "Natal Central"
}
]
I take this list and step to be displayed using the Component Selectmultiple
npm install react-native-select-multiple
But this one comes along Warning
Warning: 'In next release Empty Section headers will be rendered
I’ve noticed that this is because I do it in the componentDidMount(). For example, if I have a Statica list, more of this Forms looks like this.
Does anyone know how to remove these Warning?
This occurs when populating the list of the component DidMount(). If you leave the static list it does not appear.
– Vinícius Fernandes
Try to use
enableEmptySections = {true}as property of your Selectmultiple as well as spoken in Warning itself.– sant0will