So In my react app, I have select menu and and two(width and height ) state variables. Here is sandbox

const [width, setWidth] = useState(0);
const [height, setHeight] = useState(0);

// select option

<div className="flex items-center space-x-2">
        <select
          id="countries"
          
        >
         
          <option
            onClick={() => {
              setWidth(100);
              setHeight(200);
            }}
            selected
            value="header_ad"
          >
            Resolution 1
          </option>
          <option
            onClick={() => {
              setWidth(1000);
              setHeight(2000);
            }}
            selected
            value="header_ad"
          >
            Resolution 2
          </option>
        </select>
      </div>

I wanted to change the values of width and height when I clicked on the select option values.

i.e. When I click on Resolution 1 option I wanted to set the values of width and height to be 100 and 200 respectively and the same as if I clicked on Resolution 2 option.

How can I achieve this? I try to change their values with onClick event but it doesn't work.

CodePudding user response：

onClick on option element does NOT exist. Please check the following code snippet.

https://codesandbox.io/s/upbeat-wind-4i89o7?file=/src/App.js

    import { useState } from "react";
    import "./styles.css";

    const data = {
      option1: {
        width: 1024,
        height: 768
      },
      option2: {
        width: 100,
        height: 78
      }
    };

    export default function App() {
      const [width, setWidth] = useState(0);
      const [height, setHeight] = useState(0);

      const handleOnChange = (value) => {
        setWidth(data[value].width);
        setHeight(data[value].height);
      };

      return (
        <div className="App">
          <h1>Hello CodeSandbox</h1>
          <h2>Start editing to see some magic happen!</h2>
          <div className="flex items-center space-x-2">
            <select
              id="countries"
              className="bg-gray-50 border w-96 border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block  p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
              onChange={(e) => handleOnChange(e.currentTarget.value)}
            >
              <option selected value="option1">
                Option 1
              </option>
              <option value="option2">Option 2</option>
            </select>
          </div>
          <br></br>
          <span>Height:{height}</span>
          <br></br>
          <span>Width:{width}</span>
        </div>
      );
    }

CodePudding user response：

So option does not have onClick prop so you can do something like this:

import { useState } from "react";
import "./styles.css";

export default function App() {
  const [width, setWidth] = useState(0);
  const [height, setHeight] = useState(0);
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <div className="flex items-center space-x-2">
        <select
          id="countries"
          
          onChange={(e) => {
            const selectedValue = e.target.value;
            if(selectedValue === "header_1"){
              setWidth(100);
              setHeight(200);
            }
            if(selectedValue === "header_2"){
              setWidth(1000);
              setHeight(2000);
            }
          }}
        >
          {/* {category?.categories?.map((catid, y) => (
              ))} */}
          <option value="default" disabled>
            Please select
          </option>
          <option value="header_1">HEADER AD111</option>
          <option value="header_2">222</option>
        </select>
      </div>
      <br></br>
      <span>Height:{height}</span>
      <br></br>
      <span>Width:{width}</span>
    </div>
  );
}

https://codesandbox.io/s/long-sunset-uow79l?file=/src/App.js:0-1434

CodePudding user response：

you need to change your code to this code:

<div className="flex items-center space-x-2">
        <select
          id="countries"
            onChange={() => {
              setWidth(1000);
              setHeight(2000);
            }}
          
        >
         
          <option 
            selected
            value="header_ad"
          >
            Resolution 1
          </option>
          <option
            selected
            value="header_ad"
          >
            Resolution 2
          </option>
        </select>
      </div>

let me know if its work cheers !!

CodePudding user response：

change your event handler from onClick to onChange on selectbox. in your event handler, check the selected option value and change you state accordingly.