CODEWITHSUNDEEP
react-native
john doe
john doe

Reputation: 816

Raw text "" must be wrapped in explicit text component

I am using a react native component listview to render nested items as follows:

      constructor() {
        super();

        this.renderRow = this.renderRow.bind(this);

        const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.state = {
          dataSource: ds.cloneWithRows([
            [
              {'main':'q', 'sub': 'y'}
            ],
            [
              {'main':'x', 'sub': 'f'},
              {'main':'c', 'sub': 'b'}
            ]
          ]),
        };
      }

      renderRow(rowData, section, row) {
        const total = this.state.dataSource.getRowCount();

        let rowView = rowData.map( x => {
          return <View> <Text>{x['main']}</Text> <Text>{x['sub']}</Text> </View>
        })
        return (
          <View>

            {rowView}
          </View>
        );
      }

      render() {
        return (
          <View style={styles.container}>
            <ListView style={styles.listView}
              dataSource={this.state.dataSource}
              renderRow={this.renderRow}
            />
          </View>
        );
      }

But I am getting following error: Raw text "" must be wrapped in explicit text component.

I am unable to track where I am getting this error from.

enter image description here

Upvotes: 1

Views: 2574

Answers (3)

Lokinder Singh Chauhan
Lokinder Singh Chauhan

Reputation: 2686

Mainly this issue arise due to space between <View> <Text> etc

A trick fix for this issue could be execute Format Document (I am using VScode (IDE), you can try with any IDE which have code styling capability). By Style fixing spaces between tags gets automatically removed.

Upvotes: 0

Sachin Gadagi
Sachin Gadagi

Reputation: 749

To solve this, I used regex search & replace in entire file, and replacing >(\s)+<Text with ><Text works.

Upvotes: 0

Hadi Mostafapour
Hadi Mostafapour

Reputation: 2266

let rowView = rowData.map( x => {
          return <View> <Text>{x['main']}</Text> <Text>{x['sub']}</Text> </View>
        })

Remove spaces between View And Text Components. Use tab and enter instead of space character.

let rowView = rowData.map( x => {
              return <View>
                         <Text>{x['main']}</Text>
                         <Text>{x['sub']}</Text>
                     </View>
            })

Upvotes: 2

Related Questions