How can I give a color as a defalut in Pressable when I create a component using the map function in reactnative?

Viewed 25

I'm using reactnative

I have values ​​in an array object called feedPeriod. At this time, I made three buttons using the map function.

Whenever each button is clicked, a function called feebtn is executed and the label value is stored in a state called feedshot. At this time, if the string value of v.label and feedshot is the same, the color of the clicked button is changed.

However, when i run the app for the first time, none of the buttons change color because the feedshot value has no value. So I tried to change the color of the first button by using useEffect to change the value of Feedshot to the value of basicfeed. However, when the app is first launched, the color of the first button does not change. I want to change the color of the first button to #51a868, how do I change my code?

this is my code

const [feedshot, setFeedshot] = useState<string>('')


  useEffect(() => {
    setFeedshot("basicfeed")

    setInnerState({ ...innerState, feedPeriod: "basicfeed" });
},[]);



const feedPeriod = [{
{label: "hello", value: "basicfeed"}
{label: "hi", value: "jeong"}
{label: "bye", value: "hyang"}
}]



<View style={insertSubPageStyle.feedkindwrapper}>

{feedPeriod.map((v,i) => {
return (
<Pressable 
    style={[{ backgroundColor: v.label === feedshot ? '#51a868' : '#94d4a5' 
      }, insertSubPageStyle.feedkindPressable]}
          key={i} onPress={feedbtn(v)} >
</Pressable>
  )
  })}
</View>
1 Answers

In your map you're checking if v.label ("hello" | "hi" | "bye") can be equal to feedshot ("basicfeed" | "").

Change v.label to v.value and it should do the work

Related