Access property value after setting it with setNativeProps - react-native

Question

I'm trying to toggle the display of dynamically created components in React Native (with Coffeescript). The components are created conform the structure of a JSON object and each component has a ref attribute with the according id so i can access the specific component like so: this.refs[ id ]
I have the following function to change the display of the component
changeDisplay: ( id ) ->
this.refs[ id ].setNativeProps( {
display: 'flex'
} );
This works fine when i want to change the initial display, but i want to toggle the display between none and flex (based on the current state).
Because i don't know how many items are rendered on forehand i can't (or don't know how to) define states for them.
I tried the following, but i somehow can't get the new display state back after setting it with setNativeProps()
changeDisplay: ( id ) ->
if this.refs[ id ].props.style.display is 'none'
this.refs[ id ].setNativeProps( {
display: 'flex'
} );
else
this.refs[ id ].setNativeProps( {
display: 'none'
} );
Initially this.refs[ id ].props.style.display returns the state the component is in when i load the view (= none), but after i run the function above the display state is visually changed (the component shows up), but this.refs[ id ].props.style.display still return the initial state none
Why?
EDIT:
Below is my (stripped) component (as requested). I want to toggle the display of the child tasks in a certain project. So if i tap the project Project 1, i want to toggle the display state of the tasks 1 & 2.
import React from 'react';
import {
StyleSheet,
Text,
View,
TextInput,
TouchableOpacity,
ScrollView
} from 'react-native';
import {
Icon,
} from 'react-native-elements';
class ListTasks extends React.Component
constructor: ( props ) ->
super props
this.data =
list: [
{
id: 1
name: 'Project 1'
type: 'project'
parent: null
},{
id: 2
parent: 1
name: 'Task 1'
type: 'task'
},{
id: 3
parent: 1
name: 'Task 2'
type: 'task'
},{
id: 4
name: 'Project 2'
type: 'project'
parent: null
},{
id: 5
parent: 4
name: 'Task 3'
type: 'task'
},{
id: 6
parent: 4
name: 'Task 4'
type: 'task'
}
]
toggleDisplay: ( id ) ->
if this.refs[ id ].props.style.display is v[ 0 ]
this.refs[ id ].setNativeProps( {
display: 'flex'
} );
else
this.refs[ id ].setNativeProps( {
display: 'none'
} );
renderList: ( data ) ->
<View>
<View>
<TouchableOpacity onPress={() => this.toggleDisplay( data.id )}>
<Text>{data.name}</Text>
</TouchableOpacity>
</View>
<View ref={data.id} style={display: 'none'}>
{ this.renderTask cor for cor in this.data.list when cor.parent is data.id }
</View>
</View>
renderTask: ( data ) ->
<View>
<Text>{data.name}</Text>
</View>
render: ->
<View>
<ScrollView style={height:'100%'}>
{ this.data.list.map( ( data ) =>
if data.type == 'project'
this.renderList( data )
) }
</ScrollView>
</View>
export default ListTasks

Answer 1

Your data structure is not very optimal for storing data that clearly has a 2D sectional kind of relationships. I have modified the data structure a bit below.
DOM manipulation is also not the React way. Instead we use states to manage the visibility and properties of the elements.
A working example of a sectional collapsible list:
import React from 'react';
import { Text, TouchableOpacity, SectionList } from 'react-native';
const data = [
{
id: 1,
name: 'Project 1',
type: 'project',
data: [
{
id: 2,
name: 'Task 1',
type: 'task',
},
{
id: 3,
name: 'Task 2',
type: 'task',
},
],
},
{
id: 4,
name: 'Project 2',
type: 'project',
data: [
{
id: 5,
name: 'Task 3',
type: 'task',
},
{
id: 6,
name: 'Task 4',
type: 'task',
},
],
},
];
class ListTasks extends React.Component {
state = {
list: data,
show: {},
};
render() {
// SectionList is used instead of ScrollView as it has better performance
return (
<SectionList
style={{ marginTop: 50 }}
sections={this.state.list}
renderItem={({ item, section }) =>
// render null if show state for the section is falsy
(this.state.show[section.id] ? <Text style={{ padding: 10 }}>{item.name}</Text> : null)
}
renderSectionHeader={({ section }) => (
<TouchableOpacity
style={{ paddingVertical: 10, margin: 10, backgroundColor: 'grey' }}
onPress={() =>
this.setState((prevState) => ({
show: {
...prevState.show,
// toggle the show state for the seciton
[section.id]: !prevState.show[section.id],
},
}))
}
>
<Text>{section.name}</Text>
</TouchableOpacity>
)}
keyExtractor={(item) => item.id}
/>
);
}
}
export default ListTasks;