Hide/Show dynamically created view - React Native - react-native

Question

As I am working on react native platform, I have achieved many UI and dynamic challenges but here I have multiple view which I am creating dynamically as per the API response like
if data length is 3
for(i=0;i<data.length;i++)
{
this.setState({ responseData:
<View>
<Text>{data[i].title}</Text>
<Text>Click to view more +</Text>
<View style={{height: 0}}>
<Text>View {i}</Text>
<Text>{data[i].requesttext}</Text>
<Text>{data[i].responsetext}</Text>
</View>
</View>
})
}
render(
<View style={styles.maincontainer}>
{this.state.reponseData}
</View>
)
//Make sure that I have written the above code just for an understanding.
Output
--------------------------
Test Title 1
Click to view more -
View 0
this is request
this is response
--------------------------
Test Title 2
Click to view more +
--------------------------
Test Title 3
Click to view more +
--------------------------
Here if I have data length is 3, I am creating 3 views and rendering it. Now my requirement is how can I show or set height auto (as there is no any display none property available in react native) that particular view which I am clicking to view more
Is there anything like id or class for reference to that particular view to set style ?
I have tried refs Refs to Components but its giving me error something like parent view node etc., and actually I dont know how to use it.
Also setting state is also not possible as this is dynamic.
Please let me know if you are not getting my point, or suggest me anything to accomplish this. Thanks!

Answer 1

Try this code:
constructor:
var views = [];
for(i=0;i<data.length;i++)
{
views.push(
<View ref={ref=>this['view_'+i]}>
<Text>{data[i].title}</Text>
<Text>Click to view more +</Text>
<View style={{height: 0}}>
<Text>View {i}</Text>
<Text>{data[i].requesttext}</Text>
<Text>{data[i].responsetext}</Text>
</View>
</View>
}
}
this.state = {views};
render:
render(
<View style={styles.maincontainer}>
{{this.state.views}}
</View>
)
To hide any view:
onPress() {
const views = this.state.views;
// remove item that you want to hide here from views array
this.setState({views})
}

Answer 2

Try like below, split in to two components which will solve your issue.
Let say you have a data like below, Take the below as an example case for your issue
const sampleJson = [
{
id: 1,
name: "Green Tea",
description: "This is Green Tea",
imageurl: "https://www.mozismenu.com/wp-content/uploads/2017/04/Chicken-Keema-Samosa-0.jpg"
},
{
id: 2,
name: "Burger",
description: "This is Burger",
imageurl: "https://www.mozismenu.com/wp-content/uploads/2017/04/Chicken-Keema-Samosa-0.jpg"
},
{
id: 3,
name: "Pizza",
description: "This is Pizza",
imageurl: "https://www.mozismenu.com/wp-content/uploads/2017/04/Chicken-Keema-Samosa-0.jpg"
}
]
//HomePage Component
import Home from "../components/Home";
export default class HomePage extends Component{
render(){
return(
<ScrollView style={styles.container1}>
{ sampleJson.map((data, index) => {
return(
<View style={styles.container} key={data.id}>
<Text style={styles.welcome}>{data.name}</Text>
<Home display={false} data={data}/> //Here i'm sending the prop display as false initially for every view, and also sending the data as prop data.
</View>
)
})
}
</ScrollView>
)
}
}
const styles = StyleSheet.create({
container1: {
flex: 1,
backgroundColor: '#F5FCFF',
},
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
welcome2: {
fontSize: 16,
textAlign: 'center',
margin: 5,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
container3: {
backgroundColor: '#0098cd',
display: "none"
}
});
//Home Component
export default class Home extends Component{
constructor(props){
super(props);
this.state = {
show: this.props.display, //Each one will depend on its own state
data: this.props.data
}
}
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome} onPress={()=> this.setState({ show: !this.state.show})}>Click to view more +</Text> //It will set the flag is false if true and will set as true if false.
//If the show prop in state is false, it renders null
{ this.state.show === true
? ( <View style={styles.container3}>
<Text style={styles.welcome2}>View </Text>
<Text style={styles.welcome2}>{this.state.data.description}</Text>
</View>
)
: null
}
</View>
);
}
}