How do I make the first box as default selected?-CodePudding

I'd created custom radio boxes like as shown below.

But I want to make like as the first one should default selected like as shown below:

Here is the full code for this:

function Chips({ data, onSelect }) {
  const [userOption, setUserOption] = useState(null);
  const selectHandler = (value) => {
    onSelect(value);
    setUserOption(value);
  };
  return (
    <View style={{flexDirection: "row"}}>
      {data.map((item) => {
        return (
          <Pressable
            style={[item.value === userOption ? styles.selected : styles.unselected, styles.commonChips]}
            onPress={() => selectHandler(item.value)}>
            <Text style={{color: item.value === userOption ? '#fff' : '#bfccd3', fontWeight: "bold"}}>{item.value}</Text>
          </Pressable>
        );
      })}
    </View>
  );
}

export default function App(){
  return (
    <Chips data={data} onSelect={(value) => setOption(value)} />
  )
}

CodePudding user response：

You can set the default value while declaring state

const [userOption, setUserOption] = useState(data[0].value);