listviewreact-nativereact-native-listview

how to change text of button in listview in react native?


I am trying to change text of button which is in listview quickly after click on it?

I am trying with following code to implement this but i cant do it i.e its not working. How can i do it? please help.

constructor(props) {
    super(props);
    this.state = {
      button_text:"Connect",
    }
  }

  ConPressed() {
    this.setState({
      button_text: "Connected",
    });
  }

  render() {
    return (
      <ListView
        dataSource={this.state.sa}
        renderRow={(rowData) => 

       <TouchableHighlight onPress={() => this.ConPressed()}>
          <Text>{this.state.button_text}</Text>
       </TouchableHighlight>

      />
    );
  }

Solution

  • export default class ListItem extends Component {
      constructor(props) {
        super(props);
    
        this.state = {
          button_text: 'Connect',
        }
      }
    
    
      ConPressed = () => {
        this.setState({ button_text: 'Connected' });
      }
    
    
      render() {
        return (
          <TouchableHighlight onPress={this.ConPressed}>
            <Text>{this.state.button_text}</Text>
          </TouchableHighlight>
        );
      }
    }
    

    So now you want to import your ListItem in your original file, and use that in your renderRow.

    renderRow={() => <ListItem />}