CODEWITHSUNDEEP
react-nativeflatlist
John Ocean
John Ocean

Reputation: 506

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

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. click-here

I want that 'soup' button selected as by-default.

currently it's working like when come to this page, no-one button is selected but after select the data appears on right black area.

enter image description here

Upvotes: 0

Views: 64

Answers (2)

Hamas Hassan
Hamas Hassan

Reputation: 941

https://snack.expo.dev/HcZKyg9lR

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

Upvotes: 2

Alpha
Alpha

Reputation: 1467

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 <></>;
}

Upvotes: 2

Related Questions