Home > Mobile >  How to solve Text strings must be rendered within a <Text> in nested map?
How to solve Text strings must be rendered within a <Text> in nested map?

Time:12-01

I'm not finding a way to solve this error in my nested map function , everything that I try ends up in a sintax error.

My code:

    {import codes....}
    const FormScreen = ({route}) => {
     const [FieldForm, setFieldForm] = useState([]);
     const [TypeForm, setTypeForm] = useState([]);
      useEffect(() => {
      if (FieldForm.length > 0) {   
        return;
      } else {
        setFieldForm(JSON.parse(route.params.paramKey).message);
        setTypeForm(JSON.parse(route.params.paramKey).tipo);
        console.log('SETINGGG',FieldForm,TypeForm);
      }
    },[FieldForm,TypeForm]);
return (<View>             
             {FieldForm.length > 0 ? (
                    FieldForm.map((item) => (
                      <>          
                        <Text>{`${JSON.stringify(item)}`}</Text>
                        <>
                        {TypeForm.map((type) => (  
                          <Text>{`${JSON.stringify(type)}`}</Text>
                        ))}
                        </>
                      </>
                    ))
                  ) : (
                    <Text key={uuid.v4()}> Loading ...</Text>
                  )}
            </View>

I tried to remove these components but it not worked, how can I make it work ?

CodePudding user response:

{TypeForm.map((type) => (
{${JSON.stringify(type)}} //-> changed as sugested ))}; // remove this ; (dot and comma)

CodePudding user response:

You could utilize a template string like {`${type}`}

I would think you're going to end up with [Object] as your text body, but that's a good starting point to start getting the values that you want.

Edit: The ` are called backticks and they're used for creating template strings or string literals. Instead of using double quotes to represent a string value, we use these. Template strings are able to have nested object values inside of them and print their string representation. If it's just a JSON object that you're trying to print in the template string, you're going to wind up printing [Object]. That's going to tell you that you're not actually printing the value of the object that you want, and you're probably after type.value, but to find the key/value of the object that you may be looking for, you could try something like <Text>{`${JSON.stringify(type)}`}</Text>.

  • Related