How can i set the value of an input and dropdown on an useState?

Question

i'm quite new using React, or programming actually haha.

I am practicing making an online store and I already have almost everything working correctly. My problem is that I want the customer to be able to select the size and quantity and set it on a useState to pass that information to the cart.

This is my code:

import { Image, Grid, Icon, Button, Form } from "semantic-ui-react";
import { size } from "lodash";
import classNames from "classnames";
import useAuth from "../../../hooks/useAuth";
import useCart from "../../../hooks/useCart";
import {
  isFavoriteApi,
  addFavoriteApi,
  deleteFavoriteApi,
} from "../../../Api/favorite";
import CarouselScreenshots from "../CarouselScreenshots";
import TabsItem from "../TabsItem"


export default function HeaderItem(props) {
  const { item } = props;
  const { poster, title, screenshots } = item;
  

  return (
    <div>
      <Grid className="header-item">
        <Grid.Column mobile={16} tablet={6} computer={8}>
          <Image src={poster.url} alt={title} fluid />
          <CarouselScreenshots title={title} screenshots={screenshots} />
        </Grid.Column>
        <Grid.Column mobile={16} tablet={10} computer={8}>
          <Info item={item} />
        </Grid.Column>
      </Grid>
    </div>
  );
}

function Info(props) {
  const { item } = props;
  const { title, summary, price, discount, url } = item;
  const [isFavorites, setIsFavorites] = useState(false);
  const [reloadFavorite, setReloadFavorite] = useState(false);
  const { auth, logout } = useAuth();
  const { addProductCart } = useCart();
  const [sizeItem, setSizeItem] = useState(null);
  const [quantity, setQuantity] = useState(null);

  useEffect(() => {
    (async () => {
      const response = await isFavoriteApi(auth.idUser, item.id, logout);
      if (size(response) > 0) setIsFavorites(true);
      else setIsFavorites(false);
    })();
    setReloadFavorite(false);
  }, [item, reloadFavorite]);

  const addFavorite = async () => {
    if (auth) {
      await addFavoriteApi(auth.idUser, item.id, logout);
      setReloadFavorite(true);
    }
  };

  const deleteFavorite = async () => {
    if (auth) {
      await deleteFavoriteApi(auth.idUser, item.id, logout);
      setReloadFavorite(true);
    }
  };

  const sizes = [
    {
      key: 'Small',
      text: 'Small',
      value: 'Small',
      name: 'size'
    },
    {
      key: 'Medium',
      text: 'Medium',
      value: 'Medium',
      name: 'size'
    },
    {
      key: 'Large',
      text: 'Large',
      value: 'Large',
      name: 'size'      
    },
  ]

  return (
    <>
      <div className="header-item__title">
        {title}
        
      </div>
      <div className="header-item__buy">
      
        <div className="header-item__buy-price">
          {/* <p>Public price: ${price} </p> */}
          <div className="header-item__buy-price-actions">
         
          {discount && <div className="header-item__buy-price-actions"> <p>-{discount}% </p>
             <p>${(price - Math.floor(price * discount) / 100).toFixed(2)}</p></div>}

            {!discount && <p>${price}</p>}
          </div>
          <p className="subtitle">Size</p>
          <Form>
          <Form.Dropdown
          placeholder='Select size'
          fluid
          selection
          options={sizes}
  />
          <p>Quantity</p>
    
      <Form.Input placeholder='1' />
    
  </Form>
        </div>
        <div className="header-item__buy-btn-container">       
        <Button
          className="header-item__buy-btn-container__buy-btn"
          type="submit"
          onClick={() => addProductCart(url)}
        >
          Buy Now
        </Button>
        <div className="heart-container" >
        <Icon
          name={isFavorites ? "heart" : "heart outline"}
          className={classNames({ like: isFavorites })}
          link
          onClick={isFavorites ? deleteFavorite : addFavorite}
        />
        </div>
        </div>
      </div>
      <div
        className="header-item__summary"
        dangerouslySetInnerHTML={{ __html: summary }}
      />
      <div className="tabs" >

        <TabsItem />
      </div>
    </>
  );
}

Answer 1

This is what you looking for.
With a functional component you will need to import useState hook, and set 2 states like this:

const [size, setSize] = useState("small");
const [quantity, setQuantity] = useState(0);

Then follow the documentation in the link above. You should ultimatly have something like <select value={size} onChange={(e) => changeSize(e)}>. And in your changeSize function, you should use setSize function to set the state.