TransWikia.com

Mostrar/ocultar boton de tarjeta en react native

Stack Overflow en español Asked by fabrixo96 on August 26, 2021

Lo que deseo es mostrar el boton de eliminar solo para el segundo opcion pero como lo estoy implementando sigue saliendo en los 2 opciones,como podria solucionarlo.

codigo primera opcion

 const items = {};
this.state.usuarios.map((usuarioTemp) => {
  if (this.state.selected == usuarioTemp.date) {
    items[this.state.selected] = [
      {
        name:
          "Nombre: " +
          usuarioTemp.nombre +
          "n" +
          "Celular: " +
          usuarioTemp.celular +
          "n" +
          "Direccion :" +
          usuarioTemp.direccion,
        conditionally: { isDeletable: false },
      },
      
    ];
  }
});

Codigo segunda opcion:

 this.state.usuariosAgenda.map((usuarioTemp2) => {
  if (this.state.selected == usuarioTemp2.date) {
    items[this.state.selected] = [
      {
        name:
          "Nombre: " +
          usuarioTemp2.nombre +
          "n" +
          "Celular: " +
          usuarioTemp2.celular +
          "n" +
          "Direccion :" +
          usuarioTemp2.direccion +
          "n" +
          "Evento :" +
          usuarioTemp2.eventos,
          conditionally: { isDeletable: true },
      },
    ];
  }
});

Uso conditionally en el renderizado de las card:

  renderItem(item) {
return (
  <TouchableOpacity
    style={[styles.item, { height: item.height }]}
    onPress={() => alert(item.name)}
  >
    <Card>
      <CardContent text={item.name} />

      {item.conditionally && 
        <CardAction separator={true} inColumn={false}>
          <CardButton
            title="Delete"
            color="purple"
              onPress={this.eliminarEvento.bind(this)} 
          />
        </CardAction>
      }
    </Card>
  </TouchableOpacity>
 );
}

estoy usando la libreria de calendario React native calendar

One Answer

conditionally es un objeto { isDeletable: true } puedes cambiar estructura de esto

conditionally: { isDeletable: true }

a esto

conditionally: true

o bien en el render solo añades la llave que te devuelve el true o false y dejas tu código anterior tal como está item.conditionally.isDeletable

{
    item.conditionally.isDeletable && 
    <CardAction separator={true} inColumn={false}>
      <CardButton
        title="Delete"
        color="purple"
          onPress={this.eliminarEvento.bind(this)} 
      />
    </CardAction>
  }

Correct answer by Saul Moreyra on August 26, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP