How to pass an array from a parent component to child component using props in React Native?

Question

I want to paas "subjects" array from SubjectsScreen to MarkAttendanceScreen and display the array items as a FlatList.

Parent Component

export default class SubjectsScreen extends Component {
    state = {
      subjects: ["A", "B"]
    };

    render() {
      return (
          ...
          <MarkAttendanceScreen subjectsArray={this.state.subjects} />
      );
    }
}

Child Component

export default class MarkAttendanceScreen extends Component {

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

    componentDidMount() {
      this.setState({ subjects: this.props.subjectsArray });
    }

    render() {
      return (   
        <FlatList>
            { this.props.subjects.map((item, key)=>(
                <Text key={key}> { item } </Text>)
            )}
        </FlatList>
      );
    }
}

Answer 1

Using props was giving error when using FlatList with map. Works fine when extracting value directly from AsyncStorage.

export default class MarkAttendanceScreen extends Component {

  state = {
    subjects: [],
    text: ""
  }

  componentDidMount() {
    Subjects.all(subjects => this.setState({ subjects: subjects || [] }));
  }

  render() {
    return (
      <View>
        <FlatList
          data={ this.state.subjects}
          renderItem={({item}) => {
            return (
              <View>
                  <Text> { item.text } </Text>
              </View>
            )
          }}
          keyExtractor={ (item, index) => index.toString()}
        />
      </View>
    );
  }
}

let Subjects = {
  convertToArrayOfObject(subjects, callback) {
    return callback(
    subjects ? subjects.split("\n").map((subject, i) => ({ key: i, text: subject })) : []
    );
  },
  convertToStringWithSeparators(subjects) {
    return subjects.map(subject => subject.text).join("\n");
  },
  all(callback) {
    return AsyncStorage.getItem("SUBJECTS", (err, subjects) =>
    this.convertToArrayOfObject(subjects, callback)
    );
  },
};