CODEWITHSUNDEEP
javascriptreactjsexponative
Joko Westbrook
Joko Westbrook

Reputation: 21

Error : Text strings must be rendered within a <Text> component

I am making an app that you can make shopping list, ans want to make a voice input but it gives me the error: Text strings must be rendered within a component

{this.state.results.map((text, index) => {
                           return (
                              <Text key={index}>
                                 Mensagem: {this.state.results}
                              </Text>
                           );
                        })}```

Upvotes: 0

Views: 687

Answers (3)

LukasWass
LukasWass

Reputation: 51

There is nothing wrong with the code you posted.
The problem is instead a letter, number or other character hiding somewhere in your JSX. This typicly happens when you accidently press a button without noticing.

This wont show as a warning in your IDE (example Visual Studio Code). You can try and narrow down where the problem is by commenting out diffrent sections of you code and if you dont get an error you know you have found what code snippet the bad character is hiding in.

I even inserted your code into a react native project of mine just to confirm it works.

{["H", "E", "L", "L", "O"].map((text, index) => {
    return (
        <Text key={index}>
            Mensagem: {text}
        </Text>
    );
})}

For everyone that is not that familiar with react native error messages or Text components. Text components have no problem handling arrays as long as you dont insert objects into them. When you pass an object into a react native Text component you get this error: "Objects are not valid as a React child".

Upvotes: 0

Emmanuel Charlot
Emmanuel Charlot

Reputation: 11

Make sure you’re bringing your built in components from react-native, not react-native-web.

Import {View, Text, ...} from "react-native"

Upvotes: 1

Matt U
Matt U

Reputation: 5118

I'm not familiar with react-native, but it sounds like the Text component expects a string, but got something else. this.state.results sounds like an array, is that correct? If you're trying to render something for each result you'll need to do something like:

return (
    <div>
        {this.state.results.map(result => (
            <Text key={index}>
                 Mensagem: {result}
            </Text>
        ))}
    </div>
);

If each object in the results array is an actual object and not a string, you'll need to use a property like {result.name} or whatever is appropriate.

Upvotes: 0

Related Questions