Warning: In next release empty section headers will be rendered - react-native-select-multiple

0

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?

    
asked by anonymous 26.12.2018 / 21:22

0 answers