Quiero renderizar una tarjeta con el segundo fondo para ambas tarjetas si una tarjeta tiene un título > 14 y un subtítulo > 24. Ahora funciona si la segunda tarjeta cambia, pero la primera no se activa.
En el componente Tarjeta, estoy tratando de verificar una longitud en useEffect y cambiar el estado. ¿Cómo es posible volver a trabajar?
Datos:
import greenBackground from '@/assets/images/backgrounds/greenBackground.png'; import ligthGreenBackground from '@/assets/images/backgrounds/ligthGreenBackground.png'; import blueBackground from '@/assets/images/backgrounds/blueBackground.png'; import lightBlueBackground from '@/assets/images/backgrounds/lightBlueBackground.png'; import { useTranslation } from 'react-i18next'; const { t } = useTranslation(); const data = useMemo( () => ([{ title: t('partner-title'), subTitle: t('partner-subtitle'), background: [greenBackground, ligthGreenBackground], }, { title: t('subscription.title'), subTitle: t('subscription.subtitle'), background: [blueBackground, lightBlueBackground], }, ]), [t]);Tarjeta:
const Card = ({background,isChangeBackgound,setIsChangeBackgound,title,subTitle}) => { useEffect(() => { setIsChangeBackgound(false); if (title.length > 14 || subTitle?.length > 24) { setIsChangeBackgound(true); } }, [isChangeBackgound]); return ( <ImageBackground style={{width: isChangeBackgound ? 280 : 190 }} source={background}> <Text>{title}</Text> <Text>{subTitle}</Text> </ImageBackground> ); };Componente donde se renderiza la tarjeta:
const Home = ({ data }) => { const [isChangeBackgound, setIsChangeBackgound] = useState(false); const renderItem = useCallback( ({ item, index }) => { return ( <Card background={isChangeBackgound ? item?.background[1] : item?.background[0]} isChangeBackgound={isChangeBackgound} setIsChangeBackgound={setIsChangeBackgound} subTitle={item.subTitle} title={item.title} /> ); }, [isChangeBackgound] ); const extractKey = useCallback(item => item.title, []); return ( <FlatList data={data} horizontal ItemSeparatorComponent={() => <View style={{ marginRight: 6 }} />} keyExtractor={extractKey} renderItem={renderItem} /> ); };Esto parece una gran cantidad de pasos adicionales para lo que está tratando de hacer. Perdóneme si no entiendo su intención, pero ¿no podría manejar todo esto en el componente Tarjeta?
// Card.js const Card = ({background, title, subTitle}) => { const longTitleOrSubtitle = title.length > 14 || subTitle?.length > 24; return ( <ImageBackground style={{width: longTitleOrSubtitle ? 280 : 190 }} source={longTitleOrSubtitle ? background[0] : background[1]} > <Text>{title}</Text> <Text>{subTitle}</Text> </ImageBackground> ); }; // Home.js const Home = ({ data }) => { const renderItem = useCallback( ({ item }) => { return ( <Card background={item.background} subTitle={item.subTitle} title={item.title} /> ); }, [item] ); const extractKey = useCallback(item => item.title, []); return ( <FlatList data={data} horizontal ItemSeparatorComponent={() => <View style={{ marginRight: 6 }} />} keyExtractor={extractKey} renderItem={renderItem} /> ); };No necesita usar estado o efectos para cambiar el componente, especialmente si el título y el subtítulo no cambiarán.