lundi 5 octobre 2020

Why is this state hook working on mobile and not on web?

I'm new to Expo and trying to develop a first app.

I have a list of cards, in which I display a text. This text may be long, so I set up a "Read more / Read less" mechanism. Each card has a reading state : if true, I show full text else I show the short text.

This works well on mobile but not on web. I assume the onPress event is fired, as the alert is shown.

Here is a snack to test the thing : https://snack.expo.io/@clementbrizard/cb7919

And the code :

import React, { useState } from 'react';
import { View, Text, FlatList, TouchableOpacity } from 'react-native';
import { Card } from 'react-native-elements';

const deliveries = [
  {
    id: '1',
    date: 'date1',
    description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
  },
  {
    id: '2',
    date: 'date2',
    description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
  },
];

export default function App() {

  const deliveriesReadingState = deliveries.reduce((acc, cur) => ({...acc, [cur.id]: false}), {});
  const [readingStates, setReadingStates] = useState(deliveriesReadingState);

  const setReadingState = (id) => {
    alert('hello');
    setReadingStates(Object.assign({...readingStates}, { [id]: !readingStates[id] }));
  };

    const ShortText = (props) => {
    return (
      <View>
        <Text numberOfLines = {3}>
        {props.text}
        </Text>
        <TouchableOpacity onPress={() => { setReadingState(props.id) }}>
          <Text>Voir plus</Text>
        </TouchableOpacity>
      </View>
    );
  }
  
  const FullText = (props) => {
    return (
      <View>
        <Text>
        {props.text}
        </Text>
        <TouchableOpacity onPress={() => { setReadingState(props.id) }}>
          <Text>Voir moins</Text>
        </TouchableOpacity>
      </View>
    );
  }

  return (
    <View>
      <FlatList
        data={deliveries}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => (
          <Card>
            <Card.Title>{item.date}</Card.Title>
            <Card.Divider />
            {
              readingStates[item.id]
                ? <FullText text={item.description} id={item.id} />
                : <ShortText text={item.description} id={item.id}/>
            }
          </Card>
        )}
      />
    </View>
  );
}



Aucun commentaire:

Enregistrer un commentaire