how can change react native elements attributes inside of loop

Question

I want use loop for create 8 button, and use difference state for each button, for example buttonOver1 for button1 and buttonOver2 for button2.

because I need change backgroundColor when mouseEnter and mouseLeave

I used eval but doesn't work, but dosen't get syntax error

is there any other way to do that?

Thanks

function appendButtonDetailItems() {
let buttonItems = []
for (let i = 1; i<= 8; i++) {
    buttonItems.push(
        
        <TouchableOpacity     
            //I used eval but doesn't work, but dosen't get syntax error
            onMouseEnter={() => eval('TopNavbarClassThis.setState({listInnerItem'+i+'Over: true})')}
            onMouseLeave={() => TopNavbarClassThis.setState({buttonOver1 : false})}
            
            style={[
                styles.mh4,
                styles.justifyContentCenter,
                TopNavbarClassThis.state.buttonOver1 ? styles.zDepth1 :  styles.zDepth0,

            ]}
        >
            
            <Text style={[
                TopNavbarClassThis.state.buttonOver1 ? styles.textWhite :  styles.textBlack,
                ]}>Button {i}</Text> 
        </TouchableOpacity>)
}
return buttonItems;
}

Answer 1

等待大神解答