CODEWITHSUNDEEP
reactjsreact-nativecomponents
livindead
livindead

Reputation: 63

React Native several identical custom components on page

I'm trying to show several of my custom components on the same page, but these components are displayed with the same content.

import React from 'react';
import { StyleSheet, Image, View, ActivityIndicator, Text } from 'react-native';
import { AppLoading, Font } from 'expo';

export default class UiCard extends React.Component {
  state = { fontsLoaded: false };

  constructor(props){
    super(props);

    image = props.image;
    mainText = props.mText;
    bottomText = props.bText;
  }



  render() {
    if( !this.state.fontsLoaded ) {
      return <AppLoading/>
    }



    return (
      <View    style={styles.rowItem}>
        <View  style={styles.rowItemInner}>
          <View  style={styles.rowItemImage}>
            <Image
              source={{ uri: image }}
              style={{  height: 150 }}
              PlaceholderContent={<ActivityIndicator />}
            />
            <View  style={styles.rowItemStars}>

            </View>
          </View>

          <View style={styles.rowItemContent}>
            <Text  style={styles.rowItemContentText}> {mainText} </Text>  
          </View>

          <View  style={styles.rowItemFooter}>
            <Text  style={styles.rowItemFooterText}> {bottomText} </Text>
          </View>
        </View>
      </View>
    );
  }
}

On the call page 

var CardsArray = [
  {id: 0, image: "", stars: 3, stext: "get 83$ back", text: "This is text card special"},
  {id: 1, image: "", stars: 5, stext: "get 22$ back", text: "This is text card ui special"},
];

var CardList = CardsArray.map( (item, index) => {
        return (
          <UiCard key={item.id} uid={item.id}  stars={item.stars} image={item.image} mText={item.text}  bText={item.stext} ></UiCard>
        );
    });

But the displayed components are shown with the same contents, although different contents are transferred to the component. Any ideas ? Please help me)

Upvotes: 0

Views: 214

Answers (2)

Kai
Kai

Reputation: 2599

Instead of bothering with this in the constructor:

image = props.image;
mainText = props.mText;
bottomText = props.bText;

just use props directly in your markup:

return (
  <View    style={styles.rowItem}>
    <View  style={styles.rowItemInner}>
      <View  style={styles.rowItemImage}>
        <Image
          source={{ uri: this.props.image }}
          style={{  height: 150 }}
          PlaceholderContent={<ActivityIndicator />}
        />
        <View  style={styles.rowItemStars}>

        </View>
      </View>

      <View style={styles.rowItemContent}>
        <Text  style={styles.rowItemContentText}> {this.props.mText} </Text>  
      </View>

      <View  style={styles.rowItemFooter}>
        <Text  style={styles.rowItemFooterText}> {this.props.bText} </Text>
      </View>
    </View>
  </View>
);

Upvotes: 1

Diceros
Diceros

Reputation: 83

You are returning the UiCard the wrong way, this is JSX, not HTML. It should look like <UiCard ...all the props />, not the <UiCard ...props ></UiCard>.

Upvotes: 0

Related Questions