Myujth

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

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.