Skip to content
Advertisement

How to solve undefined is not a function (near ‘…userForm.map…’)?

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"]}

Advertisement

Answer

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>)
}
Advertisement