Conditionally rendering Font Awesome Icons - reactjs

Question

I am currently mapping an array to produce several Font Awesome Icons. I have an OnClick method which I am using as a flag: I want to change the icon of only the clicked item. This is my implementation:
<FontAwesomeIcon id={i.key} onClick={this.ToggleIcon} icon={this.state.clicked ? faHeart : faCalendarAlt}/>
ToggleIcon = (e) =>{
if((this.state.clicked)){
this.setState({clicked: true})
}
else if!(this.state.clicked)){
this.setState({clicked: false})
}
}
However, this changes ALL of the icons instead of only the clicked one. How can I accomplish this?

Answer 1

You'll want to track identifiers for your clicked objects in your state, instead of a simple boolean.
If you want only one icon to be 'clicked' at a time:
<FontAwesomeIcon id={i.key} onClick={e => this.ToggleIcon(e, i.key)} icon={this.state.clicked === i.key ? faHeart : faCalendarAlt}/>
ToggleIcon = (e, key) =>{
this.setState(prevState => {
...prevState,
clicked: prevState.clicked === key ? null : key
});
}
If you want to track clicked state for multiple icons:
import * as R from 'ramda';
...
// Init state with empty array
state = {
clicked: [],
// ...other state in this component
}
...
<FontAwesomeIcon id={i.key} onClick={e => this.ToggleIcon(e, i.key)} icon={R.includes(i.key, this.state.clicked) ? faHeart : faCalendarAlt}/>
ToggleIcon = (e, key) =>{
this.setState(prevState => {
if (!R.includes(key, prevState.clicked)) {
return {
...prevState,
clicked: R.append(key, prevState.clicked)
};
}
return {
...prevState,
clicked: R.without(key, prevState.clicked)
};
});
}
I'm using ramda here, but you can use your preferred method of manipulating arrays without mutation. This also assumes that i.key is a unique identifier for each icon.
For the second case, another approach would be to instead wrap each icon in a small component which handles its own state (and would look very similar to what you already have), which is a generally encouraged practice for performance reasons. Whether it's the best approach will depend on the purpose of these icons and the purpose of their 'clicked' state, however.

Answer 2

Are you rendering all those icons on the same component? If so, that's your problem. You're updating a state for the whole component, therefore the state value is equal everywhere, throughout it. So what's the solution? Right, it's to assign different clicked state key/value to each icon.
Array:
class Icons extends React.Component {
constructor(props) {
super(props)
this.state = {
icons: []
}
}
toggleIcon(index, event) {
const iconState = this.state.icons[index] || {}
this.setState({
...this.state,
icons: [
...this.state.icons.slice(0, index),
{
..._currentValue,
clicked: !iconState.clicked
},
...this.state.icons.slice(index + 1)
]
})
}
render() {
return (
<div>
{ ICONS.map((item, index) => {
const iconState = this.state.icons[index] || {}
return (
<FontAwesomeIcon id={index} onClick={this.toggleIcon.bind(this, index)} icon={iconState.clicked ? faHeart : faCalendarAlt} />
)
}) }
</div>
)
}
}
Object:
class Icons extends React.Component {
constructor(props) {
super(props)
this.state = {
icons: {
a: { clicked: false },
b: { clicked: false }
}
}
}
toggleIcon(key, event) {
this.setState({
...this.state,
icons: {
...this.state.icons,
[key]: {
...this.state.icons[key],
clicked: !this.state.icons[key].clicked
}
}
})
}
render() {
return (
<div>
<FontAwesomeIcon id={'a'} onClick={this.toggleIcon.bind(this, 'a')} icon={this.state.icons.a.clicked ? faHeart : faCalendarAlt} />
<FontAwesomeIcon id={'b'} onClick={this.toggleIcon.bind(this, 'b')} icon={this.state.icons.b.clicked ? 'icon 1' : 'icon 2' } />
</div>
)
}
}
learn more:
https://reactjs.org/docs/state-and-lifecycle.html