Change vector icon on press React Native

Question

I have a card component called ChecklistCard.js. My goal is to change the Feather icon in the CheckboxPlaceholder on press from "square" to "check-square" and also to change the color of the icon. This is what I have already.

const ChecklistCard = ({ title, description, icon }) => {

  return (
    <TouchableOpacity >
      <ChecklistCardContainer>
        <IconBox iconName={icon} />
        <MiddleContainer>
          <Title>{title}</Title>
          <Description>{description}</Description>
        </MiddleContainer>
        <CheckboxContainer>
          <CheckboxPlaceholder>
            <Feather name={'square'} size={iconSize.lg} color={'black'} />
          </CheckboxPlaceholder>
        </CheckboxContainer>
      </ChecklistCardContainer>
    </TouchableOpacity>
  )
};


export default ChecklistCard

Answer 1

You can try this piece of code :

const ChecklistCard = ({ title, description, icon }) => {

  let [typeIcon,setType] = useState ('square')

  return (
    <TouchableOpacity onClick={()=>{
      if(typeIcon==='square'){
        setType('check-square')
      }else{
        setType('square')
      }
    }} >
      <ChecklistCardContainer>
        <IconBox iconName={icon} />
        <MiddleContainer>
          <Title>{title}</Title>
          <Description>{description}</Description>
        </MiddleContainer>
        <CheckboxContainer>
          <CheckboxPlaceholder>
            <Feather name={typeIcon} size={iconSize.lg} color={'black'} />
          </CheckboxPlaceholder>
        </CheckboxContainer>
      </ChecklistCardContainer>
    </TouchableOpacity>
  )
};


export default ChecklistCard