Trying to change icon for a single list item - css

Question

I'm trying to create an expandable list component. When I click on a list item,
I want the icon to the right of it to change. Right now, when a list item is tapped,
each icon is changed. I only want icon of that particular item to change. Been
thinking about it for 20min and figured I'd reach out for help . Thanks!
import { List, ListItem } from 'react-native-elements';
export default class ExpandingList extends Component {
constructor(props){
super(props)
this.state = {
visibleItems: false
}
}
toggleMenu(){
this.setState({
visibleItems: !this.state.visibleItems
})
};
render() {
const list = "list 1, list 2, list 3";
return (
<View>
<List>
{
list.map((item, i) => (
<ListItem
onPress={ () => this.toggleMenu() }
key={i}
rightIcon={this.state.visibleItems ? iconRight : iconDown}
title={item} />
))
}
</List
</View
)
}
}

Answer 1

You are doing a boolean value and all list items are looking at the same value. To achieve what you want you need to pass a unique value, in this situation i am using the index but ideally you will have a unique identifier besides the index.
Below should be able to acheive what you are looking for
import { List, ListItem } from 'react-native-elements';
export default class ExpandingList extends Component {
constructor(props){
super(props)
this.state = {
visibleItems: null
}
}
toggleMenu(itemIndex){
this.setState({
visibleItems: itemIndex
})
};
render() {
const list = "list 1, list 2, list 3";
return (
<View>
<List>
{
list.map((item, i) => (
<ListItem
onPress={ () => this.toggleMenu(i) }
key={i}
rightIcon={this.state.visibleItems === i ? iconRight : iconDown}
title={item} />
))
}
</List
</View
)
}
}
Note: I am assuming you have this rendering already but for other people. The list const is a comma separated string and string do not have a map function.
Also the code above does not take into account deselecting a list item that was already selected. That can be done by checking the value in the state and if it is the same reseting the value back to null.

Answer 2

Here's a way to do it also:
import React from "react";
import ReactDOM from "react-dom";
class App extends React.Component {
state = {
visibleItem: 0
};
select = i => {
this.setState({
visibleItem: i
});
};
render() {
const items = [1, 2, 3, 4];
return (
<React.Fragment>
{items.map((v, i) => {
return (
<div
style={{ color: this.state.visibleItem === i ? "red" : "black" }}
onClick={() => this.select(i)}
>
{v}
</div>
);
})}
</React.Fragment>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Working example here.