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

user_9886501 0
Viewed 8307

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?

react-native javascript
5 Answers

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!

user_101724080

You can't pass function in return, it interprets it as a string value and View can't render text.

You can use lifecycle methods to execute this function.

user_94630630

You are trying to render an array inside <Text></Text> component. You can only render pure string.

If you want to display dynamic text inside component use "state". This may help you:

constructor(props){
 super(props);
 ...
 ...
 this.state = {
  a = []
 }
}

And then:

render() {

 this.config();

 return(
    <View style={styles.container}>
        this.state.a && this.state.a.map(data=> (
           <Text>{data}</Text>
        ));
    </View>

 )  
}
user_26768640

this.config() is a function that you write this in jsx. if you want to call config function, you must write outside of jsx. this.config() in return, consider as a string. every string must be inside Text tag. so you see this error.

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

If you are using some conditional statements then use ternary operators. If you are using && and then passing a component after that then it will through you an error. See below what was my code. Here is Feed is my component:

Before

{userId && <Feed posts = {posts}/> } // this will give you an error

After

{userId ? <Feed posts = {posts}/> : null} // this works fine

So maybe you have such kind of problem with your code. Have a look now.

user_123873910
Related