Toggle icon for a single item in an array of items

user_10520348 0
Viewed 231

I am trying to toggle a font awesome icon to either selected or not like a radio button. I am able to get it to toggle but when I click on one of the icons, all of the icons get toggled. I would like to toggle only the one that was clicked on.

export default class ItemDetails extends Component {
    constructor() {
    super();

    this.state = {
        items: [
            {name: 'Bread Cheese', options: ['Monterrey Jack', 'Cheddar']}, 
            {name: 'Combo Side', options: ['Fries', 'Sprouts', 'Sweet Potato Fries', 'Tots']},
            {name: 'Sandwich Details', options: ['No Tomatoes', 'No sauce', 'Extra Cheese', 'Extra Onions']},
            {name: "It's a wrap", options: ['gluten free', 'extra sauce', 'extra cheese', 'extra lettuce', 'extra pilaf']}
        ],
        show: false,
     };


    toggle() {
        this.setState({ show: !this.state.show });
    }


    renderRadioButton = (item) => {
        let iconSolid = <Icon name="circle" color="darkgray" type='solid'/>,
            iconLight = <Icon name="circle" color="darkgray" type='light'/>;
        return (
            <View>
                {item.options.map(option =>
                  <ListItem selected={false} onPress={this.toggle.bind(this)}>
                    <View style={styles.icon}>
                     {this.state.show ? iconSolid : iconLight}
                    </View>
                    <Text style={styles.iconPadding}>{option}</Text>
                  </ListItem>)}
            </View>
          );
       };
    };


    render() {
        return(
            <View style={styles.content}>
                <View>{this.renderRadioButton(this.state.items[0])}</View>
            </View>
        )}


}

This is the icon for an unselected item

This is the icon for a selected item

font-awesome react-native javascript
1 Answers

You first need to have separate flags for each of your icon.

I couldn't test following code because of dependencies, but this is what you can do:

 constructor() {
    super();

    this.state = {
      items: [
        { name: 'Bread Cheese', options: ['Monterrey Jack', 'Cheddar'] },
        { name: 'Combo Side', options: ['Fries', 'Sprouts', 'Sweet Potato Fries', 'Tots'] },
        { name: 'Sandwich Details', options: ['No Tomatoes', 'No sauce', 'Extra Cheese', 'Extra Onions'] },
        { name: "It's a wrap", options: ['gluten free', 'extra sauce', 'extra cheese', 'extra lettuce', 'extra pilaf'] }
      ],
      show: {},
    };
  } 

toggle(option) {
    this.setState((prevState) => {
      if (prevState.show[option]) {
        return {
          ...prevState,
          show: { ...prevState.show, [option]: !prevState.show[option] }
        }
      } else {
        return {
          ...prevState,
          show: { ...prevState.show, [option]: true }
        }
      }
    });
  }


  renderRadioButton = (item) => {
    let iconSolid = <Icon name="circle" color="darkgray" type='solid' />,
      iconLight = <Icon name="circle" color="darkgray" type='light' />;
    return (
      <View>
        {item.options.map(option =>
          <ListItem selected={false} onPress={this.toggle.bind(this, option)}>
            <View style={styles.icon}>
              {this.state.show[option] ? iconSolid : iconLight}
            </View>
            <Text style={styles.iconPadding}>{option}</Text>
          </ListItem>)}
      </View>
    );
  };

Let me know if this helps.

user_56920890
Related