Im trying to render some strings , but I'm getting error, someone knows how to solve it ?
code :
const FormScreen = ({route}) => {
const [userForm, setuserForm] = useState([]);
useEffect(() => {
if (userForm.length > 0) {
console.log('userform',userForm,userForm.length); // not get inside here gives me a eror before it
return
}
else{
setuserForm(route.params.paramKey);
console.log('TEST',userForm,'LENG',userForm.length)} // returns => TEST [] LENG 0
},[userForm])
return (
<SafeAreaView style={{flex: 1}}>
<View style={styles.container}>
<Text style={styles.textStyle}>COLLECTION :</Text>
{userForm.length > 0 ? (
userForm.map((item) => (
<Text key={uuid.v4()}>{item.fields}</Text>
))
) : (
<Text key={uuid.v4()}> Loading ... </Text>
)}
{..}
route.params.paramKey is a string
route.params.paramKey string is = {"objeto":"CLMobj_test","fields":["abcs","test"],"type":["Date","Text"]}
Since route.params.paramKey is a string, you cannot call map on it directly.
If you want to go ahead with this approach you can do something like this:
setuserForm([...route.params.paramKey]);
EDIT: After you added
route.params.paramKey = {"objeto":"CLMobj_test","fields":["abcs","test"],"type":["Date","Text"]}
You can just set
setuserForm(JSON.parse(route.params.paramKey).fields)
and use map on it
{userForm.length > 0 ?
(userForm.map((item) => <Text key={uuid.v4()}>{item}</Text>):
(<Text key={uuid.v4()}> Loading ... </Text>)
}
Can you try with this code, note that I've changed the "Use Effect" conditon, and JSX also:
const FormScreen = ({route}) => {
const [userForm, setuserForm] = useState([]);
useEffect(() => {
setuserForm(JSON.parse(route.params.paramKey));
},[])
return (
<SafeAreaView style={{flex: 1}}>
<View style={styles.container}>
<Text style={styles.textStyle}>COLLECTION :</Text>
{!!userForm && userForm.fields.length > 0 ? (
userForm.fields.map((item) => (
<Text key={uuid.v4()}>{item}</Text>
))
) : (
<Text key={uuid.v4()}> Loading ... </Text>
)}