CODEWITHSUNDEEP
javascriptreact-native
Markus Hayner
Markus Hayner

Reputation: 2959

select an item from FlatList and pass the value to a variable state

After I render all the elements in my ListView I want to select one item and pass item.text value to var { category } but my code now is selecting all elements and have no clue how to pass the value. Any help?

_choosen(isSelected) {
  this.setState({
    selected: !isSelected,
  });
}
_categorySelected = () => {
  var { category } = this.state;
  console.log(category);
}
_renderList = ({ item }) => {
  let backgroundColor = this.state.selected ? "#000000" : "#ffffff";
  let fontWeight = this.state.selected ? "bold" : "normal";
  let showNext = this.state.selected ? "block" : "none";
  return (
    <TouchableHighlight
      selected={this.state.selected}
      onPress={() => this._choosen(this.state.selected)}
      underlayColor="#ffffff"
    >
      <View style={{ padding: 10, flexDirection: 'row' }}>
        <View style={{ backgroundColor: backgroundColor, width: 5, height: 25 }}></View>
        <Text style={{ marginLeft: 10, fontSize: 20, fontWeight: fontWeight }}>{item.text}</Text>
      </View>
    </TouchableHighlight>
  );
}

Here is my FlatList list and jobCategory is upper in constructor 

<FlatList
  style={{ marginTop: 20 }}
  data={this.state.jobCategory}
  renderItem={this._renderList}
/>

EDIT

constructor(props) {
    super(props);
    this.state = {
      jobCategory: [
        { key: '1', text: 'Barista & Bartender', value: 'Barista & Bartender' },
        { key: '2', text: 'Beauty & Wellness', value: 'Beauty & Wellness' },
        { key: '3', text: 'Careworkers & Health', value: 'Careworkers & Health' },
        { key: '4', text: 'Chef & Cook', value: 'Chef & Cook' },
        { key: '5', text: 'Cleaning', value: 'Cleaning' },
        { key: '6', text: 'Construction', value: 'Construction' },
        { key: '7', text: 'Driver & Courier', value: 'Driver & Courier' },
        { key: '8', text: 'Education', value: 'Education' },
        { key: '9', text: 'Events & Promotion', value: 'Events & Promotion' },
        { key: '10', text: 'Kitchen porter', value: 'Kitchen porter' },
        { key: '11', text: 'Office & Admin', value: 'Office & Admin' },
        { key: '12', text: 'Retail', value: 'Retail' },
        { key: '13', text: 'Sales & Marketing', value: 'Sales & Marketing' },
        { key: '14', text: 'Waiter or Waitress', value: 'Waiter or Waitress' },
        { key: '15', text: 'Warehouse', value: 'Warehouse' },
        { key: '16', text: 'Other', value: 'Other' }
      ],
      selected: false,
    };
    this._choosen = this._choosen.bind(this);
  }

Upvotes: 0

Views: 5804

Answers (1)

Samuli Hakoniemi
Samuli Hakoniemi

Reputation: 19049

You have two options: either you have an array of selected states for each and every item or then you "toggle" the state by passing an id of selected row.

Without knowing your whole structure, I'd recommend going with latter one:

in constructor:

this.state = {
  selectedItem: null,
};

and then in your functions:

_choosen(selectedItem) {
  this.setState({ selectedItem });
}

_renderList = ({ item }) => {
  const isSelected = (this.state.selectedItem === item.id);

  const backgroundColor = isSelected ? "#000000" : "#ffffff";
  const fontWeight = isSelected ? "bold" : "normal";
  const showNext = isSelected ? "block" : "none";

  return (
    <TouchableHighlight
      onPress={() => this._choosen(item.id)}
      underlayColor={"#ffffff"}
    >
      <View style={{ padding: 10, flexDirection: 'row' }}>
        <View style={{ backgroundColor, width: 5, height: 25 }}></View>
        <Text style={{ marginLeft: 10, fontSize: 20, fontWeight }}>{item.text}</Text>
      </View>
    </TouchableHighlight>
  );
}

Of course this requires you actually have an id / key for your items (like you should have). If you have no identifying field, then this can also be achieved with keyExtractor by using index as a distinct value (which is not the best option):

<FlatList
  style={{ marginTop: 20 }}
  data={this.state.jobCategory}
  renderItem={this._renderList}
  keyExtractor={(item, index) => `item-${index}`}
/>

Upvotes: 4

Related Questions