Adding and Removing List Items in React Native

In the previous post I added a React Native toggle button. In this post I will add and remove list items.

We’re going to be storing an array of meetings, adding to it and removing from it.

First, we extract a meeting into a specialized class.

export default class Meeting extends React.Component {
  render() {
    return (
      <View style={styles.meeting}>
        <Text style={styles.meetingText}>{this.props.val.startDateTime.toString()}</Text>
      </View>
    );
  }
}

The first thing to notice is the usage of props. These are passed into the Meeting component at creation time via a constructor(props). It’s possible to declare required props for a component using propTypes.

import PropTypes from 'prop-types';

Meeting.propTypes = {
  val: PropTypes.object
}

The parent component renders a list of meetings inside a scrollable view.

export default class Main extends React.Component {
  state = {
    meetings: []
  }

  render() {
    let meetings = this.state.meetings.map((val, key) => {
      return <Meeting key={key} val={val} />
    })

    return (
      <View>
        <ScrollView>
          { meetings }
        </ScrollView>
      </View>
    )
  }
}

Adding Meetings

A meeting has a start and an end date, so we will also need to remember when a meeting started.

state = {
  meetingStartedAt: null
}

A meeting is pushed into the meetings array when it ends.

endMeeting() {
  this.state.meetings.push({
    startDateTime: this.state.meetingStartedAt
  })

  this.setState({
    meetingStartedAt: null,
    meetings: this.state.meetings
  })
}

A meeting can be removed from the meetings array by key.

removeMeetingByKey(key) {
  this.state.meetings.splice(key, 1)
  this.setState({ meetings: this.state.meetings })
}

See the complete code with additional and removal wired up is in 33-minutes-app@249dd0. In the next post I will add a meeting clock timer.

Daniel Doubrovkine

Adding and Removing List Items in React Native react native | 33 minutes

Adding Meetings

Adding and Removing List Items in React Native