Good afternoon, can anyone 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 use an API, which returns me a list of the Campi object, this is the JSON response from 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 get this list and step to be displayed using the SelectMultiple
npm install react-native-select-multiple
However, warning appears
warning: 'In next release empty section headers will be rendered
I've noticed that this is because I'm doing componentDidMount (). For example, if I have a statically correct list, more of this forms stays that way.
Does anyone know how to remove these warning?