CODEWITHSUNDEEP
javascriptreact-native
Sumit
Sumit

Reputation: 27

cannot add a child that doesn't have a yoganode to a parent

I m getting an error and I searched on it for a couple of hours but the only thing I found was there could be a syntax error in the code but I wasn't able to find any even after a lot of searching. I m not that experienced in coding just started learning react-native so anything you could suggest or point to would be really helpful. I m posting my code below. The error I m getting is :

cannot add a child that doesn't have a yoganode to a parent without a measure function!(Trying to add a 'ReactRawTextShadowNode' to a 'LayoutShadowNode')

React Native version: 0.52.0

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

class Dashboard extends React.Component {

constructor() {
    super();
    this.state = { list: [1, 2, 3, 4, 5, 6, 7, 8, 9] };
}

componentDidMount() {
    let listmount = this.state.list.map((listing => {
        return (
            console.log(listing.listmount, 'ls list'),
            <View key={listing.listmount}><Text style={{ color: 'black' }}>{listing.listmount}</Text></View>
        );
    }));
    this.setState({ list: listmount });
    console.log(listmount, 'showing list');
}

render() {
    return (
        <View style={{ borderWidth: 3, borderColor: 'red' }}>
            <View style={styles.dashboard}>{this.state.list}</View>
        </View>
    );
}}

const styles = { dashboard: { flexWrap: 'wrap', height: '100%', width: '100%', flexDirection: 'row', justifyContent: 'flex-start' }, itemViewStyle: { padding: 10, flex: 1, margin: 10, flexBasis: '40%', borderWidth: 1, borderColor: 'blue', } };

export default Dashboard;

Upvotes: 0

Views: 1198

Answers (3)

Andrada L
Andrada L

Reputation: 276

If you want to build the list separately, you should create a method that returns the list, called in the render method of the component. For this component a better approach could be: 

renderList() {
  return (

  <View style={styles.dashboard}>

  {
   this.state.list.map(
    listing => 
       <View key={listing.listmount}>
          <Text style={{ color: 'black' }}>{listing.listmount}</Text
       </View>
       );
    )
  }
  </View>
}

render() {
    return (
        <View style={{ borderWidth: 3, borderColor: 'red' }}>
            {this.renderList()}
        </View>
    );
}}

Upvotes: 0

Sumit
Sumit

Reputation: 27

class Dashboard extends React.Component {
state = { list: [1, 2, 3, 4, 5, 6, 7, 8, 9] };

listRenderer() {
   return this.state.list.map(listing =>
        <View key={'view ' + listing}>
            <Text key={'text ' + listing } style={{ color: 'black' }}>
                {listing}
            </Text>
        </View>
    );
}

render() {
    return (
        <View style={{ borderWidth: 3, borderColor: 'red' }}>
            <View style={styles.dashboard}>{this.listRenderer()}</View>
        </View>
    );
}}

Well this works for me just tried to return the main map function and a little code sorting did the job for me. Hope this helps someone.

Upvotes: 1

Ravi
Ravi

Reputation: 35579

You cannot display list with <View>, it should be enclosed with <Text>

<View style={{ borderWidth: 3, borderColor: 'red' }}>
        <Text style={styles.dashboard}>{this.state.list}</Text>
</View>

Upvotes: 0

Related Questions