How can I fix this error? I want only gives <Text>{selectedValueState}</Text>

Asked

Viewed 104 times

0

How can I fix this mistake?

inserir a descrição da imagem aqui

It occurs when I try to render the text with {selectedValueEstado}.

When I do <Text>{selectedValueCidade}</Text> it’s quiet (I’m new, so I have no knowledge of it).

I’m wearing this JSON in the app:

{
  "sigla": "AC",
  "nome": "Acre",
  "cidades": [
    "Acrelândia",
    "Assis Brasil",
    "Brasiléia",
    "Bujari",
    "Capixaba",
    "Cruzeiro do Sul",
    "Epitaciolândia",
    "Feijó",
    "Jordão",
    "Mâncio Lima",
    "Manoel Urbano",
    "Marechal Thaumaturgo",
    "Plácido de Castro",
    "Porto Acre",
    "Porto Walter",
    "Rio Branco",
    "Rodrigues Alves",
    "Santa Rosa do Purus",
    "Sena Madureira",
    "Senador Guiomard",
    "Tarauacá",
    "Xapuri"
  ]
},
{
  "sigla": "AL",
  "nome": "Alagoas",
  "cidades": [
    "Água Branca",
    "Anadia",
    "Arapiraca",
    "Atalaia",
    "Barra de Santo Antônio",
    "Barra de São Miguel",
    "Batalha",
    "Belém",
    "Belo Monte",
    "Boca da Mata",
    "Branquinha",
    "Cacimbinhas",
    "Cajueiro",
    "Campestre",
[...]

That’s the Picker State:

export default props => (
  <View>
    {
      props.data ?
      <Picker selectedValue={props.selectedValue} onValueChange={props.onValueChange}>
        {
          props.data.map(estado =>
            <Picker.Item key={estado} label={estado.nome} value={estado} />)
        }
      </Picker>
      :
      null
    }
  </View>
)

That’s the Picker City:

export default props => (
   <View>
    {
      props.data ?
      <Picker selectedValue={props.selectedValue} onValueChange={props.onValueChange}>
        {
          props.data.cidades.map(cidade =>
            <Picker.Item key={cidade} label={cidade} value={cidade} />)
        }
      </Picker>
      :
      <Picker selectedValue={props.selectedValue} onValueChange={props.onValueChange}>
        <Picker.Item label={'Selecione'} />
      </Picker>
    }
  </View>
)

The surrender is like this:

render() {
  const { selectedValueCidade, selectedValueEstado, uf } = this.state;

  return (

    <Text style={Estilos.texto}>ONDE VOCÊ MORA?</Text>

    <View style={Estilos.picker1}>
      <SelectEstados
        selectedValue={selectedValueEstado}
        data={uf}
        onValueChange={this.renderValueChangeEstado}
      />
    </View>

    <View style={Estilos.picker2}>
      <SelectCidades
        selectedValue={selectedValueCidade}
        data={selectedValueEstado}
        onValueChange={this.renderValueChangeCidade}
      />
    </View>

    <Text>{selectedValueEstado}</Text>
    <Text>{selectedValueCidade}</Text>

The problem is when I try to spin this <Text>{selectedValueEstado}</Text>.

javascript json react-native ecmascript-6

  • Now it’s posted straight

  • 1

    The structure of the selectedValueState object is this json you posted? Looking at your code the problem you are trying to render an object and it is illegal you have to map his keys, with {JSON.stringify(objeto)} it shows the content, but a pure object the gift does not understand, so the error message.

  • What happens when you do console.log(JSON.stringify(this.state.selectedValueEstado));? Can you give an example of what you think <Text>{selectedValueEstado}</Text> can show?

  • That, the structure of selectedValueState is json. I’m wanting to give a text of the state name, example: "name": "Acre", Ai o Text = Acre.

  • I can give the Text of {selectedValueCity}, but the {selectedValueState} is like Justcase said, it is an object, how I would do it?

1 answer

2


Good ! As it is a JSON or you give a map or a JSON stringfy in the position you want, or in it integer.

Examples:

<Text> {JSON.stringify(selectedValueEstado)} </Text>

{
    selectedValueEstado.map((uf) =>
        <Text key={uf.nome}> uf.nome </Text>
   ))
}

Browser other questions tagged javascript json react-native ecmascript-6

You are not signed in. Login or sign up in order to post.