CODEWITHSUNDEEP
javascriptreactjsreact-native
Mike Victoria
Mike Victoria

Reputation: 256

Child component value to Parent component display React Native

I have two component child component and parent component, the role of this child component is to star rating, now I want to get the value from the child to display in the parent component and use the data from the child.

Adding: I use Redux and react navigation 2.0

Child Component

import React, { Component } from 'react';
//import react in our code. 
import {
  StyleSheet,
  View,
  Platform,
  Text,
  Image,
  TouchableOpacity,
} from 'react-native';


class Rate extends Component {
  constructor() {
    super();
    this.state = {
      Default_Rating: 0,
      //To set the default Star Selected
      Max_Rating: 5,
      //To set the max number of Stars
    };
    //Filled Star. You can also give the path from local
    this.Star = '../../assets/star_filled.png';
    //Empty Star. You can also give the path from local
    this.Star_With_Border = '../../assets/star_corner.png';
  }
  UpdateRating(key) {
    this.setState({ Default_Rating: key });
    //Keeping the Rating Selected in state
    this.props.onStarRating(this.state.Default_Rating)
  }

  render() {
    let React_Native_Rating_Bar = [];
    //Array to hold the filled or empty Stars
    for (var i = 1; i <= this.state.Max_Rating; i++) {
      React_Native_Rating_Bar.push(
        <TouchableOpacity
          activeOpacity={0.7}
          key={i}
          onPress={this.UpdateRating.bind(this, i)}>
          <Image
            style={styles.StarImage}
            source={
              i <= this.state.Default_Rating
                ?
                require('../../assets/star_filled.png')
                : require('../../assets/star_corner.png')
            }
          />
        </TouchableOpacity>
      );
    }
    return (
      <View style={styles.MainContainer}>
        {/*View to hold our Stars*/}
        <View style={styles.childView}>{React_Native_Rating_Bar}</View>
        <Text style={styles.textStyle}>
          {/*To show the rating selected*/}
          {this.state.Default_Rating} / {this.state.Max_Rating}
        </Text>
      </View>
    );
  }
}

export default Rate;

for parent Component

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Container} from 'native-base';
import Rate from '../components/Rate'


class Leads extends Component {
  constructor(props) {
    super(props);

    this.state = {

    }
  }

  //RENDER MAIN COMPONENT
  render() {

    return (
      /* MAIN VIEW COMPONENT */
      <Container>
          <Rate  />
      </Container>
    )
  }
}

const mapStateToProps = (state) => ({

})
export default connect(mapStateToProps)(Leads);

Upvotes: 2

Views: 868

Answers (1)

Tenusha Guruge
Tenusha Guruge

Reputation: 2290

To get data from child component to parent component, you can pass a function from parent component to child component. Then once the function is called from child component, you can update the data in parent component.

Parent:

handleChange = data =>{
   this.setState({ data: data })
}

render(){
   return(
      <Child
         handleChange={this.handleChange}
      >
   )
}

Child:

in here you can call that parsed function from parent

this.props.handleChange("your data")

Upvotes: 5

Related Questions