CODEWITHSUNDEEP
listviewreact-native
Louis345
Louis345

Reputation: 740

ListView with a dynamic object issue

I am rewriting this question with the hopes that I can have this issue resolved.

I believe my overall issue is my lack of understanding of state and updating state.

My overall goal is to have myself add English and Japanese words and be then be able to view them in a list view with awesome styles. My IninitialState looks like this:

 const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});

module.exports = React.createClass({
    getInitialState(){
          var  dataSource = new ListView.DataSource({
                    rowHasChanged: (r1, r2) => r1 !== r2,
                    sectionHeaderHasChanged: (s1, s2) => s1 !== s2
                  })
       return({
            option:['Please select an option'],
            menu:['Add Words','View List','DeleteWords','EditWords'],
            showWordList:'',
            wordObj:{EnglishWord:'',Japanese:''},
            JapaneseWord:'',
            EnglishWord:'',
            EnglishWordArr:[],
            showAddWords:'',
            showList:'',
            showMenu:true,
            dataSource: dataSource.cloneWithRowsAndSections([])




       })

    }

I set dataSource to an empty array as when the application initially opens there will be no saved data. At least for now.

My render functions looks like this:

      renderRow: function(foodItem) {
    return (
      <Text>{foodItem.JapaneseWord}</Text>
    )
},

renderSectionHeader: function(sectionData, category) {
  return (
    <Text style={{fontWeight: "700"}}>{category}</Text>
  )
},

The very last piece of the puzzle is where I actually add the words from the user-input. Here is my function:

addWords(){


         let newArr = this.state.EnglishWordArr.concat({EnglishWord:this.state.EnglishWord,JapaneseWord:this.state.JapaneseWord});


         this.setState({EnglishWordArr:newArr})

         this.forceUpdate();

         console.log(this.state.EnglishWordArr);
        this.setState({showWordList:true});
        dismissKeyboard();
        this.setState({JapaneseWord:''})
         this.setState({EnglishWord:''})
          this.setState({
                 dataSource:this.loadData()
               });




    }

The problem I am facing is where do I update the state to indicate to react that dataSource has been updated? Again, this is my first project ever in react.

Thanks in Advance.

Upvotes: 1

Views: 385

Answers (1)

Alex Harrison
Alex Harrison

Reputation: 1571

First, could you post your entire render function ?... as it should always return some component and the supplied code does not by itself.

You appear to understand your issue when you say "DataSource excepts a pre-populated array or it will yell at me." In your code, you are literally giving data source a null or nil value which is different than giving it an array or even an empty array, namely []. In short, change your code in the first part to the following: 

 var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});

 return({
        option:['Please select an option'],
        menu:['Add Words','View List','DeleteWords','EditWords'],
        showWordList:'',
        wordObj:{EnglishWord:'',JapaneseMeaning:''},
        JapaneseWord:'',
        EnglishWord:'',
        EnglishWordArr:[],
        showAddWords:'',
        showList:'',
        showMenu:true,
        dataSource: ds.cloneWithRows([]),              
   })

},

In this, you are giving data source an empty array and telling it to reload the data for each row when that row and the new value are different.

Additionally, in your ListView component which I assume is declared in your render function, set enableEmptySections prop = false to remove any warnings.

Thus in render...

render() {
..
<ListView
.. your props
enableEmptySections={true}
/>
..
}

Upvotes: 2

Related Questions