Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

React Mapping through an array not working

$
0
0

Im working on a journal app and i need to map through a list of 'days' but it doesn't render them

Heres my JournalScreen.tsx:
I have a testing array journal where i set a basic 'day'
I want to map through but it doesn't work

import * as React from 'react';import { StyleSheet, TouchableOpacity, Linking, Platform } from 'react-native';import JournalCard from '../components/JournalCard';import { View } from '../components/Themed';import { RootTabScreenProps } from '../types';export default function JournalScreen({ navigation }: RootTabScreenProps<'Journal'>) {  const [journal, setJournal] = React.useState([    {      date: "29.09.21",      value: "Today was a nice day this is also a Placeholder"    }  ])  return (<View style={styles.container}>      {        journal.map((journal) => {<JournalCard key="i" value={journal} />        })      }</View>  );}const styles = StyleSheet.create({  container: {    flex: 1,    alignItems: 'center',    justifyContent: 'center',  },});

and here's my JournalCard.tsx:It's very basic just the props and some text not much to say

import { Ionicons } from '@expo/vector-icons';import React, { useState } from 'react';import { StyleSheet, Pressable } from 'react-native';import { Text, View } from './Themed';import { Audio } from 'expo-av';import AsyncStorage from "@react-native-async-storage/async-storage";import Colors from '../constants/Colors';import useColorScheme from '../hooks/useColorScheme';type JournalCardProps = {    value: any}export default function JournalCard({ value }: JournalCardProps) {    const colorScheme = useColorScheme()    return (<View style={[styles.container, { backgroundColor: Colors[colorScheme].uiBg }]}><Text style={styles.date}>{value.date}</Text><Text>{value.value}</Text></View>    );}const styles = StyleSheet.create({    container: {        width: '90%',        padding: 10,        borderRadius: 5    },    date: {        fontWeight: 'bold',        fontSize: 26,        marginBottom: 20,        borderBottomWidth: 2    }});

Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>