How to set the first box default selected when comes first time on this page?-CodePudding

Below is the screenshot, where the first box is not selected right now, but i want to make it selected when come to first time on this page.

I attached the full expo-link.

CodePudding user response：

In your Soup Screen First initlize your data array before your state and then set a default value in your userOption state like this.

export default function Soup({ navigation, item }) {
  const data = [
    { id: 1, value: "Soup" },
    { id: 2, value: "Break fast" },
    { id: 3, value: "Appetizers" },
    { id: 4, value: "Snacks" },
    { id: 5, value: "Salads" },
    { id: 6, value: "Pasta" },
    { id: 7, value: "Burgers" },
    { id: 8, value: "Chicken" },
    { id: 9, value: "Kebab" },
    { id: 10, value: "Main dishes" },
    { id: 11, value: "Desert" },
    { id: 12, value: "Healthy dishes" },
  ];

  const [option, setOption] = useState(null);
  const [products, setProducts] = useState(productsList);

  const [userOption, setUserOption] = useState(data[0].value);
  const selectHandler = (value) => {
    // onSelect(value);
    setUserOption(value);
  };

  return <></>;
}

CodePudding user response：

https://snack.expo.dev/HcZKyg9lR

Snack updated kindly check. I hope this help you out.