how to use the state hook for dynamically created components in react native - react-native

Question

I am trying to do is use useState for dynamically created components in React. In the code below I am, rendering the new components, but I cannot find a way to keep track of their state like I did for the hardcoded components. The new components are rendered when the user creates a new "post", causing new "posts" to be generated.
return (
{
results.map( (eachPost) =>
{ const [status, setStatus] = React.useState(true); },
<TouchableOpacity>
<Card>
<Text>
{JSON.parse(eachPost).title}
</Text>
<Collapsible collapsed = {status}>
{JSON.parse(eachPost).content}
</Collapsible>
</Card>
</TouchableOpacity>
)
}
)
UPDATE: I need to know how I can re-render the page
import * as React from 'react';
import { StyleSheet, Button, TextInput, Image, TouchableOpacity } from 'react-native';
import EditScreenInfo from '../components/EditScreenInfo';
import { Text, View } from '../components/Themed';
import { NavigationContainer } from '#react-navigation/native';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import { Card } from 'react-native-elements';
import Collapsible from 'react-native-collapsible';
import Accordion from 'react-native-collapsible/Accordion';
import { CardStyleInterpolators } from '#react-navigation/stack';
import AsyncStorage from '#react-native-community/async-storage';
import { useState, useCallback } from 'react';
import Post from './Post'
import RenderToLayer from 'material-ui/internal/RenderToLayer';
import { useForceUpdate } from './useForceUpdate'
async function createNewPost (titleAndContent : string){
const post = {titleAndContent_: titleAndContent}
try {
await AsyncStorage.setItem('post' + Math.floor(100000 + Math.random() * 900000), JSON.stringify(post))
} catch (e) {
console.log(e)
}
//console.log(newPosts)
}
export default function NewsScreen({ navigation }: { navigation: any }) {
const [status, setStatus] = React.useState(true);
const [status2, setStatus2] = React.useState(true);
const [status3, setStatus3] = React.useState(true);
const [renderedData, setRenderedData] = React.useState(new Array<string>());
const [input, setInput] = React.useState('Please enter the details of the post in the format of title,content');
const [, forceUpdate] = useState();
const getData = async () => {
try {
const keys = await AsyncStorage.getAllKeys();
const result = await AsyncStorage.multiGet(keys);
console.log(result)
return result;
} catch (e) {
console.log(e);
}
};
async function parseData() {
const payments = await getData();
if (payments) {
const res = payments
//.filter((e: any[]) => e[1] && e.includes('{'))
//.map((e: any[]) => e[1]);
setRenderedData(res);
console.log(res)
}
return renderedData;
}
const results: string[] = []
renderedData.forEach( (eachPost) => {
if ((/\{"title.*}/g.test(eachPost[1]))) results.push(eachPost[1])
})
console.log(results)
React.useEffect(() => {
if (renderedData.length === 0) {
parseData();
}
forceUpdate
},[]);
return (
<View style={styles.container}>
<Text style={{ fontSize: 25}}>News</Text>
<View style = {{flexDirection: "row"}}>
<TextInput
style={{ height: 40, width: 700, borderColor: 'gray', borderWidth: 1 }}
value = {input}
onChangeText={text=>setInput(text)}
/>
<Button
onPress={()=> createNewPost(input)}
title="Add post"
color="blue"
accessibilityLabel="A button to allow the admin to create a new post"
/>
<Button
onPress = {useForceUpdate()}
title="submit"
/>
</View>
<View>
{
results.map( (eachPost) =>
<Post titleAndContent={JSON.parse(eachPost)}/>
)
}
<TouchableOpacity onPress={() => setStatus(!status)}>
<Card>
<Text>
Moore Park Lift Outage
</Text>
<Image
source={{
uri: 'https://i.imgur.com/Etr5xBn.png'
}}
style={{width: 20, height: 20, marginLeft: 10}}
>
</Image>
<Collapsible collapsed = {status}>
<Text style={{fontWeight: 'bold'}}>
UPDATED 6 Aug 09:30 {'\n'}
Details: Ongoing {'\n'}
Lift 2 at Moore Park Light Rail is temporarily out of service. For assistance, ask staff.. {'\n'}
</Text>
<Image
source={{
uri: 'https://svg-clipart.com/svg/blue/PGaAIh0-blue-wheelchair-vector.svg',
}}
style={{width: 70, height: 90, marginTop: 30}}
>
</Image>
</Collapsible>
</Card>
</TouchableOpacity>
<TouchableOpacity onPress={() => setStatus2(!status2)}>
<Card>
<Text>Dulwich Hill Line running slow</Text>
<Image
source={{
uri: 'https://i.imgur.com/iNjXQMW.png'
}}
style={{width: 20, height: 20, marginLeft: 10}}
>
</Image>
<Collapsible collapsed = {status2}>
<Text>
The Dulwich Hill Line is running slow due to track-work being conducted between Lilyfield and Rozelle Bay
</Text>
</Collapsible>
</Card>
</TouchableOpacity>
<TouchableOpacity onPress={() => setStatus3(!status3)}>
<Card >
<Text>Extra services running</Text>
<Image
source={{
uri: 'https://imgur.com/Etr5xBn'
}}
style={{width: 20, height: 20, marginLeft: 10}}
>
</Image>
<Image
source={{
uri: 'https://i.imgur.com/Etr5xBn.png'
}}
style={{width: 20, height: 20, marginLeft: 10}}
>
</Image>
<Collapsible collapsed = {status3}>
<Text>
Extra services will be running this week to help students get back to school
</Text>
</Collapsible>
</Card>
</TouchableOpacity>
</View>
<View style={styles.button}>
<Button
onPress={() => navigation.navigate('HomeScreen')}
title="Go back"
color="blue"
accessibilityLabel="A button to click so that you can go back to the home page"
/>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'flex-start',
justifyContent: 'flex-start',
flexDirection: 'column',
},
title: {
fontSize: 20,
fontWeight: 'bold',
alignItems: 'center',
justifyContent: 'center',
},
separator: {
marginVertical: 30,
height: 1,
width: '80%',
},
button: {
margin: 10,
flexDirection: 'row',
},
news:{
flexDirection:'column',
backgroundColor: 'white',
},
eachnews:{
margin: 500,
fontWeight: 'bold',
alignItems: 'flex-start',
justifyContent: 'flex-start',
},
textnews:{
fontSize: 20,
},
});

Answer 1

I think you need more knowledge related to basics of react.
You need a Post component
Post.js
export default (props) => {
const [status, setStatus] = useState();
return (<TouchableOpacity>
<Card>
<Text>
{props.title}
</Text>
<Collapsible collapsed = {status}>
{props.content}
</Collapsible>
</Card>
</TouchableOpacity>);
};
When u call Post
App.js
import Post from './Post.js'
export default App = ()
{
const result = [];
return (
results.map( (eachPost) =>{
const eachPost = JSON.parse(eachPost);
return (<Post title={eachPost.title} content={eachPost.content})/>)
}
}
)