How to update Flatlist Choice-CodePudding

Absolute react-native noob here. I am struggling with updating the 'selected item'. I'm using this as a piece of dummy data:

this.state = {
  branch: '',
  completedBy: '',
  reportedTo: '',
  branchData: {
    text: 'Branch',
    value: '',
    options: [
      {code: '0001', name: 'TEST 1', key: 1},
      {code: '0002', name: 'TEST 2', key: 2},
      {code: '0003', name: 'TEST 3', key: 3},
    ]
  }
};

I then made a separate file for my dropdown component, it looks like this:

super(props);
    this.state = {
        modalVisible: false
    };
  }
  
  render() {
    return (
        <>
        <TouchableWithoutFeedback style={styles.refreshBtn} onPress={() => this.setState({ modalVisible: true })} >
            <View style={styles.container} >
                {
                    this.props.data.value ? 
                        <Text style={styles.selectedText} >{this.props.data.value}</Text>
                        :
                        <Text style={styles.placeholderText} >{this.props.data.text}</Text>
                }
                <MaterialCommunityIcons name={'chevron-down'} size={30} color={Colors.grey} />
            </View>
        </TouchableWithoutFeedback>

        <Modal 
          animationType="slide"
          visible={this.state.modalVisible}
          onRequestClose={() => {
            this.setState({ modalVisible: false })
           }}
        >
            <TouchableOpacity onPress={() => this.setState({ modalVisible: false })} style={{ flexDirection: "row", justifyContent: "flex-end", margin: 10, paddingLeft: 50}}>
                <Ionicons name="md-close" size={30} />
            </TouchableOpacity>
            <FlatList 
            data={this.props.data.options}
            keyExtractor={(item) => item.key.toString()}
            renderItem={({ item }) => (
                <TouchableOpacity style={styles.itemContainer} onPress={() => console.log('tapped'} >
                    <Text style={styles.itemText}>{item.code   ' '   item.name}</Text>
                </TouchableOpacity>
            )}
            />
        </Modal>
        </>
    );
  }
}

And then back to my initial file, I am simply calling the component like this:

<DropDownMenu data={this.state.branchData}/>

How do I update the value in the branch data object in order to display the selected branch on the dropdown in order to indicate to the user that their choice has been selected instead of displaying the placeholder text which displays as long as value is = to an empty string.

CodePudding user response：

You can pass down a state updating function as a prop to your DropDownMenu component, add this function to the same file where state has been initialized

function updateBranch(dataFromDropDownComponent) {
   // modify branch data as required
   // this.setState({...this.state, branchData: ... })
}

and then in JSX, pass it as a prop:

<DropDownMenu data={this.state.branchData} updateBranch={updateBranch}/>

Now in your DropDownMenu component, you can access and call the updateBranch function via this.props.updateBranch to update the state whenever required.