1

In my react app, I'm setting multiple values in an object. I also have some input field with a button/icon attached to it. What I want is, to get the id value of that button on click and with that id value I want to check if the object has the same property or not. If it has that property I want to use it later for separate functionality. But right now I'm just console logging it. For this I've attached a handleClick() handler and getting the e.target.id and printing it. But there are 2 problems I'm facing right now.

  1. Sometimes I'm getting empty string on clicking. Sometimes I've to click multiple times to get the value. enter image description here
  2. In the handleClick() I'm not getting the data from the object. I've tried using hasOwnProperty or key in Object, but they are not working

code

const dropdowns = {
  group: [
    { code: "10202", description: "10202 - 10202 - 10202 - 10202 - 10202" },
    { code: "10202", description: "10202 - 10202 - 10202 - 10202 - 10202" },
    { code: "10202", description: "10202 - 10202 - 10202 - 10202 - 10202" },
    { code: "10202", description: "10202 - 10202 - 10202 - 10202 - 10202" },
    { code: "10202", description: "10202 - 10202 - 10202 - 10202 - 10202" },
    { code: "10202", description: "10202 - 10202 - 10202 - 10202 - 10202" },
  ],
  supplier: [
    { code: "3039", name: "3039 - 3039 - 3039 - 3039 - 3039" },
    { code: "3039", name: "3039 - 3039 - 3039 - 3039 - 3039" },
    { code: "3039", name: "3039 - 3039 - 3039 - 3039 - 3039" },
    { code: "3039", name: "3039 - 3039 - 3039 - 3039 - 3039" },
    { code: "3039", name: "3039 - 3039 - 3039 - 3039 - 3039" },
    { code: "3039", name: "3039 - 3039 - 3039 - 3039 - 3039" },
  ],
  attribute: [
    { code: "274", name: "274 - 274 - 274 - 274 - 274" },
    { code: "274", name: "274 - 274 - 274 - 274 - 274" },
    { code: "274", name: "274 - 274 - 274 - 274 - 274" },
    { code: "274", name: "274 - 274 - 274 - 274 - 274" },
    { code: "274", name: "274 - 274 - 274 - 274 - 274" },
    { code: "274", name: "274 - 274 - 274 - 274 - 274" },
  ],
  unit: [
    { code: "EA", name: "EA - EA - EA - EA - EA" },
    { code: "EA", name: "EA - EA - EA - EA - EA" },
    { code: "EA", name: "EA - EA - EA - EA - EA" },
    { code: "EA", name: "EA - EA - EA - EA - EA" },
    { code: "EA", name: "EA - EA - EA - EA - EA" },
    { code: "EA", name: "EA - EA - EA - EA - EA" },
  ],
  uses: [
    { code: "1", name: "1 - 1 - 1 - 1 - 1" },
    { code: "1", name: "1 - 1 - 1 - 1 - 1" },
    { code: "1", name: "1 - 1 - 1 - 1 - 1" },
    { code: "1", name: "1 - 1 - 1 - 1 - 1" },
    { code: "1", name: "1 - 1 - 1 - 1 - 1" },
    { code: "1", name: "1 - 1 - 1 - 1 - 1" },
  ],
};


const SetupBar = () => {
  

  const [formData, setFormData] = useState({
    group: "",
    supplier: "",
    attribute: "",
    unit: "",
    uses: "",
  });

  const handleClick = (value) => {
    console.log(value);
    // console.log(dropdowns.value); I want this
  };



return (
    <div className="parent">   
     <div className="input-fields">
      <label htmlFor="attribute">Attribute ID</label>
      <div className="input-grp">
        <input type="text" />
        <CgArrowRightR
          id="attribute"
          style={{ fontSize: "21px" }}
          onClick={(e) => handleClick(e.target.id)}
        />
      </div>
    </div>
          
        <div className="input-fields">
          <label htmlFor="color">Color</label>
          <input type="text" id="color" />
        </div>
        <div className="input-fields">
          <label htmlFor="group">Group Code</label>
          <div className="input-grp">
            <input type="text" />
            <CgArrowRightR
              id="group"
              style={{ fontSize: "21px" }}
              onClick={(e) => handleClick(e.target.id)}
            />
          </div>
        </div>
        <div className="input-fields">
          <label htmlFor="supplier">Supplier</label>
          <div className="input-grp">
            <input type="text" />
            <CgArrowRightR
              id="supplier"
              style={{ fontSize: "21px" }}
              onClick={(e) => handleClick(e.target.id)}
            />
          </div>
        </div>
buzz
  • 896
  • 2
  • 10
  • 22
  • The screenshot you have included looks like it's logging out an empty string, not `null`. Does your `CgArrowRightR` component set the `id` immediately? Is it possible there's some delay during which the ID would be unset? (and therefor return an empty string when clicked) – DBS Feb 09 '22 at 09:44
  • I tried using `setTimeout()` but still getting the empty string – buzz Feb 09 '22 at 09:46
  • you can try to console 'e' rather than 'id', from there you can compare what all you are getting under 'e' when its working and when its not. – M.Sharma Feb 09 '22 at 09:49
  • yes, I'm getting `""` in the id, while printing the `e` only...but how do I resolve this now – buzz Feb 09 '22 at 09:51
  • sometimes i'm getting the value and sometimes I'm getting empty string – buzz Feb 09 '22 at 09:53
  • I think we'll need to see a [reproducing example of the problem](https://stackoverflow.com/help/minimal-reproducible-example), right now the code in the question _should_ work correctly, it might be some other code in the project that's causing the issue, but we can't help with that unless we can see it. – DBS Feb 09 '22 at 09:53
  • Share your component `CgArrowRightR` code. – Vitaliy Rayets Feb 09 '22 at 09:54
  • @VitaliyRayets `CgArrowR` is just an icon component from `react-icons` – buzz Feb 09 '22 at 10:11

1 Answers1

1

Your problem with e.target, react-icons SVG also have path tag without id and when you click on icon you click on path and you get empy string. Just use e.currentTarget.id instead of e.target.id. currentTarget always refers to the element to which the event handler has been attached.

Second issue (You incorrect get property):

const handleClick = (value) => {
   console.log(dropdowns[value]);
};
Vitaliy Rayets
  • 2,299
  • 1
  • 6
  • 12