React-Native the child component don't render the information within the parent component

Question

I'm developing a React Native app that using a ScrollView. I want to display an amount of items (A card with title and a child component).

The problem comes when I have to render each item, while the parent renders ok, the child does not.

I don't know where could be the issue, here's my code:

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

    const mismo =[
     'Mismo',
     'Mismo',
     'Mismo',
     'Mismo',
     'Mismo'
    ];


    class Mismo extends Component {


     renderMismo2(){
       mismo.map((item) =>{
       return(
         <View>
           <Text>{item}</Text>
         </View>
       )
     })
    }

  render(){
    return(
      <View>
      {this.renderMismo2()}
      </View>
    );
  }
}

export default Mismo;

=================================

import React, {Component} from 'react';
import {View, Text, ScrollView} from 'react-native';
import {Card} from 'react-native-elements';

import PriceCard from '../components/PriceCard';
import Mismo from '../components/Mismo';


class OrderPricingCard extends Component{
  renderAllPrices(){
    this.props.data.orders.map((item, i) => {
      return(
        <View>
          <PriceCard
            key={item.transporterName}
            data={item}
          />
        </View>
      );
    })
  }

  renderMismo(){
    return(
      <Mismo />
    );
  }

  render () {
    return (
      <Card
        containerStyle={styles.cardContainer}
        title={`Pedido: ${this.props.data.id}`}
      >
        <ScrollView
          horizontal
        >
            {this.renderMismo()}

            {this.renderAllPrices()}



        </ScrollView>
      </Card>
    );
  }
}

const styles = {
  cardContainer:{
    borderRadius: 10,
    shadowColor: "#000",
    shadowOffset: {
        width: 0,
        height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
  }

}

export default OrderPricingCard;

Answer 1

This can be an easy mistake to make! I've done it several times. What's happened is you've forgotten the return statement for the render methods ( renderMismo2() and renderAllPrices() ) found in each component. Although the map methods correctly have return statements, you're not actually returning anything from the functions themselves.

If you were to console.log() either of those function calls above the return in the React render() method, you would see undefined in the console.

Here's what they would look like corrected.

renderAllPrices(){
    // added the 'return' keyword to begin the line below
    return this.props.data.orders.map((item, i) => {
      return(
        <View>
          <PriceCard
            key={item.transporterName}
            data={item}
          />
        </View>
      );
    })
  }

 renderMismo2(){
   // same here, added the 'return' keyword
   return mismo.map((item) =>{
   return(
     <View>
       <Text>{item}</Text>
     </View>
   )
 })
}

I tested the above in a React Native sandbox and it works. Hope that helps!