Я пытаюсь изменить цвет одной кнопки из списка в собственной базе React и сохранить этот цвет в Asynstorage, когда пользователь меняет экран. Но когда я нажимаю кнопку, чтобы изменить ее цвет, это происходит со всеми кнопками из списка. Как мне это исправить?
export default class Results extends React.Component {
constructor(props) {
super(props);
this.state = {
loading: true,
localeObject: null,
recording: null,
error: null,
iconColor:'gray'
};
}
async componentWillMount() {
}
handlePress = async () => {
this.setState({iconColor : "yellow"});
try {
await AsyncStorage.setItem('color', iconColor);
} catch (error) {
console.log("Error saving data" + error);
}
};
render() {
if (this.state.loading) return <Container />;
else {
const recordingsEl = [];
this.state.recordings.forEach((v, k) => {
recordingsEl.push(
<ListItem icon>
<Body>
<Text style={{fontSize: 15}}>Date: {v.date}</Text>
</Body>
<Right>
<Button style={{ backgroundColor: "#fff" }} onPress={() => this.handlePress()} >
<Icon active name= "star" style ={{fontSize: 20, color:this.state.iconColor}} />
</Button>
</Right>
</ListItem>
);
})
return (
<Container>
<Content>
<List>
{recordingsEl}
</List>
</Content>
</Container>
);
}
}
}