CODEWITHSUNDEEP
react-nativejsx
Nepho
Nepho

Reputation: 1122

RawText "JSX_GENERATED_STRING" must be wrapped in an explicit <Text> component

I'm generating 100 components in an array in javascript, like this:

export default class App extends React.Component {
  render() {
    var arr = [];
    for (var i = 0; i < 100; i++)
    { arr.push("<Button title={\"Button " + i + "\"} color =\"#55aaff\"/>\n"); }

    return (
        <ScrollView>
          {arr}
        </ScrollView>
    );
  }
}

I'm expecting the content of arr (which is 100 strings representing React Buttons) to be expanded as plain text, between my two <ScrollView> tags.

When compiled, I'm facing this exact error message:

RawText « <Button title={"Button 0"} color ="#55aaff"/> » must be wrapped in an explicit <Text> component.

The string is apparently correct, however React-Native won't let me use it as if it's typed manually in between the <ScrollView> tags.

Is there a special tag to let react-native know that the following strings content is to be treated as Components?

Thanks in advance for any help.

Upvotes: 0

Views: 63

Answers (1)

bennygenel
bennygenel

Reputation: 24660

React components are objects and you can directly push them into arrays.

arr.push(<Button title={"Button " + i} color="#55aaff" />);

Upvotes: 1

Related Questions