how to fix, error is "Invariant Violation: Text strings must be rendered within a <Text> component."

Question

I am trying to make config() run but it somehow fails.

import React, {Component} from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default class try1 extends Component {

  constructor(noofVertices){
    super();
    this.noofVertices = this.noofVertices
    this.edge = {}
this.a = [];}


addVertex(v){
  this.edge[v] = {}
}

addEdge(v, w,weight){
  if (weight == undefined) {
           weight = 0;
       }
       this.edge[v][w] = weight;
  }

config(){

    var vertices = [ 'App0', 'App1', 'App2', 'App3', 'App4' ];

    // adding vertices
    for (var i = 0; i < vertices.length; i++) {
      this.addVertex(vertices[i]);
    }

    // adding edges
    this.addEdge('App0', 'App1',1);
    this.addEdge('App0', 'App2',1);
    this.addEdge('App0', 'App3',1);
    this.addEdge('App0', 'App4',1);

    this.addEdge('App1', 'App0',1);
    this.addEdge('App1', 'App2',1);
    this.addEdge('App1', 'App3',1);
    this.addEdge('App1', 'App4',1);

    this.addEdge('App2', 'App0',1);
    this.addEdge('App2', 'App1',1);
    this.addEdge('App2', 'App3',1);
    this.addEdge('App2', 'App4',1);


    this.addEdge('App3', 'App0',1);
    this.addEdge('App3', 'App1',1);
    this.addEdge('App3', 'App2',1);
    this.addEdge('App3', 'App4',1);

    this.addEdge('App4', 'App0',1);
    this.addEdge('App4', 'App1',1);
    this.addEdge('App4', 'App2',1);
    this.addEdge('App4', 'App3',1);


    this.traverse('App1');
    } 



traverse(vertex)


 {

            for(var adj in this.edge[vertex])
                this.a.push(this.edge[vertex][adj])
        this.a.sort()


           //this.updateEdge1('App0');   
        }




render(){

  return (
    <View style={styles.container}>

      this.config()
      <Text>{this.a}</Text>

    </View>
  );
}
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    alignItems: 'center',
    justifyContent: 'center',
  },

}
);

I am expecting 11111 to be displayed on screen.

It is showing error "Invariant Violation: Text strings must be rendered within a component."

I am trying to deal with graphs, I have tried maps also but that didn't work.

Does react native supports maps?

Answer 1

Notice your this.a property on your try1 component is an array: this.a = []; and you're trying to display this property directly within your render() method like so:<Text>{this.a}</Text>. However, this causes issues since:

The render() method doesn't support rendering a return type of just an array directly. When you call a React component's render() method it must return one of the following:

1. React elements. Typically created via JSX. For example, <div /> and <MyComponent /> are React elements that instruct React to render a DOM node, or another user-defined component, respectively.
2. Arrays and fragments. Let you return multiple elements from render. See the documentation on fragments for more details.
3. Portals. Let you render children into a different DOM subtree. See the documentation on portals for more details.
4. String and numbers. These are rendered as text nodes in the DOM. Booleans or null. Render nothing. (Mostly exists to support return test && <Child /> pattern, where test is boolean.)

For more information check out the render() spec.

There are other errors in this code as well:

1. Custom react components must be named with an uppercase otherwise JSX will think this is an HTML tag instead. Rename try1 to Try1.
2. Move your config function call before the return statement as the return statement expects the actual view itself to be returned.

With these points in mind, try looping through this.a and giving each element in the array a Text element to be displayed, something like the following:

render() {
    this.config();
    let aEles = this.a;
    return(
        <View style={styles.container}>
            aEles.map(edge => (
               <Text>{edge}</Text>
            ));
        </View>

    )  
}

Hopefully that helps!