Change state when click the button in react native

Question

I'm new to react native and want to make one function change state for the clicked button only not others that have the same function as I explained in the title here is an example code please any help & I know it might be a selly question but any answer will help thanks a lot

export default class App extends Component {
  constructor(){
    super();
    this.state = {
      opened: true,
    }
 }


 componentHideAndShow = () =>{
   this.setState(previousState => ({opened: !previousState.opened}))
 }

  render() {
      return (
            {
              this.state.opened ? <Text> hello</Text> : <Text> hello sdfsdfsdf</Text> 
            }
            <Text onPress={this.componentHideAndShow}>test</Text>
            {
              this.state.opened ? <Text> hello</Text> : <Text> hello sdfsdfsdf</Text> 
            }
            <Text onPress={this.componentHideAndShow}>test</Text>
    );
  }
}

Answer 1

This should work.

import React, { Component } from 'react';
import { View, Text, Button } from 'react-native';

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      opened: [true, true]
    };
  }

  componentHideAndShow = index => {
    const opened = this.state.opened;
    opened[index] = !opened[index];
    this.setState({ opened: opened });
  };

  render() {
    return (
      <View>
        {this.state.opened[0] ? (
          <Text> hello</Text>
        ) : (
          <Text> hello sdfsdfsdf</Text>
        )}
        <Button onPress={() => this.componentHideAndShow(0)}>test</Button>
        {this.state.opened[1] ? (
          <Text> hello</Text>
        ) : (
          <Text> hello sdfsdfsdf</Text>
        )}
        <Button onPress={() => this.componentHideAndShow(1)}>test</Button>
      </View>
    );
  }
}

Edit: you can do like this if you don't know the number of items:

    import React, { Component } from 'react';
import { View, Text, Button } from 'react-native';

const myArrayOfStrings = ['hello1', 'hello2', 'hello3', 'hello4', 'hello5'];

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      opened: undefined
    };
  }

  componentDidMount() {
    let opened = [];
    myArrayOfStrings.map(item => {
      opened.push(true);
    });
    this.setState({ opened: opened });
  }

  componentHideAndShow = index => {
    const opened = this.state.opened;
    opened[index] = !opened[index];
    this.setState({ opened: opened });
  };

  render() {
    const output = myArrayOfStrings.map((item, index) => {
      return (
        <View>
          <Text>
            {this.state.opened[index]
              ? `${item} is opened`
              : `${item} is opened`}
          </Text>
          <Button onPress={() => this.componentHideAndShow(0)}>test</Button>
        </View>
      );
    });

    return <View>{output}</View>;
  }
}

Answer 2

You can just pass boolean prop from the function call saying if it should call it or not:

() => this.componentHideAndShow(true)

And the function:

 componentHideAndShow = (shouldBeCalled) =>{
   if(shouldBeCalled){
     this.setState(previousState => ({opened: !previousState.opened}))
   }
 }

maybe name it better than I did:)