I am new to using state management and was finding difficulty editing styles of a component using useState. Currently I have a swiper component that holds my main images and below that I have a thumbnail gallery for each of those images with a `borderWidth:1`. What I want is that only the border for the current slide should be active while the others show no borderWidth. Currently my display looks like this where all the thumbnails have a border: ``` export default function App() { const [activeBorder, setActiveBorder] = useState(); const [activeIndex, setActiveIndex] = useState(); const fishMapping = ["Fish Azure", "Fish Salmon", "Fish Another"]; const onIndexChanged = (index) => setActiveIndex(index); return ( { activeIndex && `Fish` ${fishMapping[activeIndex]} } ); } ``` And for the thumbnails below this is my code: BottomImages.js: ``` export default class BottomImages extends Component { state = { columns: 3, }; render() { const { columns } = this.state; return ( { return ( ); }} keyExtractor={(index) => { return index; }} /> ); } } ``` ListItem.js which holds my thumbnail images as well as the borderbox for the images: ``` const ListItem = (props) => { const { itemWidth } = props; return ( ); }; ``` Here's a link to the snack just in case: [Sandbox](https://snack.expo.dev/@jay_m/paranoid-carrot)

jayvijaymodi1

Using useState to edit the style of a Component in React Native

Join Our Newsletter. No Spam, Only the good stuff.