CODEWITHSUNDEEP
react-nativereact-native-sectionlist
sree_iphonedev
sree_iphonedev

Reputation: 3534

React native SectionList not updating

I am developing a sample app as part of learning react-native, in which it has a ColorForm that accepts the value from a TextInput and with the help of Props, the data will be sent to the Main view, such as App. The App has a SectionList that doesn't update with the new value inputs from ColorForm.

Following is the source code that I have used:

App.js

import React, { Component } from 'react'
import {
  StyleSheet,
  SectionList,
  Text,
  Alert
} from 'react-native'
import ColorButton from './components/ColorButton'
import ColorForm from './components/ColorForm'

class App extends Component {

  constructor() {
    super()
    this.state = {
      backgroundColor: 'blue',
      availableColors: ['red', 'green', 'yellow', 'pink']
    }

    this.changeColor = this.changeColor.bind(this)
    this.newColor = this.newColor.bind(this)
  }

  changeColor(backgroundColor) {
    this.setState({ backgroundColor })
  }

  newColor(color) {
    const colors = [
      ...this.state.availableColors,
      color
    ]

    this.setState(colors)
  }

  render() {
    const { backgroundColor, availableColors } = this.state

    return (
      <SectionList style={styles.list}
        backgroundColor={backgroundColor}
        sections={[{ title: "Header", data: availableColors }]}
        renderSectionHeader={({ section }) => (
          <ColorForm onNewColor={this.newColor} />
        )}
        renderItem={({ item }) => (
          <ColorButton backgroundColor={item} onSelect={this.changeColor} />
        )}
        keyExtractor={(item, index) => index}
      />
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 20
  },
  list: {
    marginTop: 40
  }
})

export default App

ColorForm.js

import React, { Component } from 'react'
import {
  View,
  Text,
  StyleSheet,
  TextInput
} from 'react-native'
import PropTypes from 'prop-types'

export default class ColorForm extends Component {
  constructor() {
    super()
    this.state = {
      txtColor: ''
    }

    this.submit = this.submit.bind(this)
  }

  submit() {
    this.props.onNewColor(this.state.txtColor.toLowerCase())
    this.setState({ txtColor: '' })
  }

  render() {
    return (
      <View style={styles.container}>
        <TextInput
          style={styles.txtInput}
          placeholder="Enter a color..."
          onChangeText={(txtColor) => this.setState({ txtColor })}
          value={this.state.txtColor}
        />
        <Text style={styles.button} onPress={this.submit}>Add</Text>
      </View>
    )
  }
}

ColorForm.propTypes = {
  onNewColor: PropTypes.func.isRequired
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-around',
    backgroundColor: 'lightgrey',
    height: 70,
    paddingTop: 20
  },
  txtInput: {
    flex: 1,
    margin: 5,
    padding: 5,
    borderWidth: 2,
    fontSize: 20,
    borderRadius: 5,
    backgroundColor: 'snow'
  },
  button: {
    backgroundColor: 'darkblue',
    margin: 5,
    padding: 5,
    alignItems: 'center',
    justifyContent: 'center',
    color: 'white',
    fontSize: 20
  }
})

Can anyone help me to sort out the issue? Thanks in advance.

Upvotes: 2

Views: 2136

Answers (1)

Ashwith Saldanha
Ashwith Saldanha

Reputation: 1738

It looks like the state is not being updated in your method newColor, since availableColors is an array u can use push operation to add new value to the array update the code as below and it will work.

newColor(color) {
    console.log('adding', color)
    const colors = this.state.availableColors
    colors.push(color)
    this.setState(colors)
}

Upvotes: 1

Related Questions