React Native / Using strings as data in FlatList? - react-native

Question

I have a JSON with the following shape for ~50 _source entries:
{
"hits": [
{
"_source": {
"name": "henry",
"jobs": ["judge", "lawyer"]
}
},
{
"_source": {
"name": "henry",
"jobs": ["dev", "waitress"]
}
}
// ...
]
}
Thanks to the community's help, I extracted each jobs as below:
const result = hits.reduce((acc, item) => acc = [item._source.jobs[0], ...acc], [])
console.log(result) // this is an array
I extracted each item from result to add a string (for example "welcome judge"):
for(i in result)
{
var message = 'welcome'+ result[i] //this is a string
}
So now, I want to use a flatlist to render my message:
constructor() {
super()
this.state = { dataSource:'' }
}
componentDidMount() {
fetch('uri')
.then(response => response.json())
.then(json => {
const result = hits.reduce((acc, item) => acc = [item._source.jobs[0], ...acc], []) // this is an array
for(i in result)
{
var message = 'welcome'+ result[i] //this is a string
}
this.setState({ dataSource : messsage})
}
renderItem =({item}) => {
return(
<View>
<Text>item</Text>
</View>)
}
render() {
return (
<View>
<FlatList
data= {[this.state.dataSource]}
renderItem= {this.renderItem}
/>
</View>
);
}
I got only one message (and not my list) and the warning 'missing key for item'

Answer 1

You should have keyExtractor={(x, i) => i.toString()} in your flatlist.
<FlatList
data= {[this.state.dataSource]}
keyExtractor={(x, i) => i.toString()}
renderItem= {this.renderItem}
/>
Here is a FlatList keyExtractor definition.

Answer 2

You will only get a single message, because your input data is just a string (converted to an array in render() to fit specifications). You change your single string variable in every iteration and update with the last changed one. You do need to push every string into an array, before you continue to the next item in the Iterable.
constructor() {
super()
this.state = { dataSource: [] }
}
componentDidMount() {
fetch('uri')
.then(response => response.json())
.then(json => {
// Get all jobs in a single array
const results = hits.reduce((acc, item) => acc = [item._source.jobs[0], ...acc], []);
// Iterate over results, concatenate with 'welcome' and push into a new array
let messages = [];
for(i in result)
{
let message = 'welcome'+ result[i];
messages.push(message);
}
// Update state with the new array 'messages'
this.setState({ dataSource : messages })
}
renderItem = ({ item }) => {
return(
<View>
<Text>{item}</Text>
</View>
);
}
render() {
return (
<View>
<FlatList
data={this.state.dataSource}
keyExtractor={(x, i) => i.toString()}
renderItem= {this.renderItem}
/>
</View>
);
}

Answer 3

Because your data source contains single string. Here you are updating the message var on each iteration, so it will have just the last string of the result array with 'hello' prepended.
for(i in result)
{
var message = 'welcome'+ result[i]
}
You should do something like this
componentDidMount() {
fetch('uri')
.then(response => response.json())
.then(json => {
const result = hits.reduce((acc, item) => acc = [item._source.jobs[0], ...acc], [])
let messages=[];
for(i in result)
{
messages.push('welcome '+ result[i]); //push each element in array
}
this.setState({ dataSource : messsages})
}
Use key extractor to remove missing key warning
render() {
return (
<View>
<FlatList
data= {[this.state.dataSource]}
renderItem= {this.renderItem}
keyExtractor={(item, index) => item + index}
/>
</View>
);
}