How to add props in the component

Viewed 42

I am using this above Flatlist with a component. So here I am saying an icon in the variable back. I want to send some color to this svg icon from {item.back}. How can i do this so that if any conditions change I will send a color to Icons and change its color?

const data = [{ back: <Icon/>}]

<FlatList
  showsVerticalScrollIndicator={false}
  keyExtractor={(item, index) => index}
  data={data}
  renderItem={() => <Item />}
/>;

const Item_view = ({ item, index }) => {
  const { navigateTo } = item;
  return <View>{item.back}</View>;
};
1 Answers

In generally, Use your SVG as a component, then all the SVG goodness is accessible:
For example:

const MenuIcon = (props) =>(
    <svg xmlns="http://www.w3.org/2000/svg" fill={props.fill} className={props.class}></svg>
)

And in your render

<li>
   <a href="/" className="sidebar__link">
      <MenuIcon fill="white"/>
    </a>
</li>
Related