Passing OnChange Function using React for drop down

Question

I have a payment component and custom dropdown component. I'm trying to pass down a function called handlePaymentImageChange from the parent (payment) to child (dropdown) so as to control the image change. However, it does not work well as I expect. What I'm trying to do is displaying the image based on the selection of the dropdown. In my case, if the value = 'Visa' -> render visa image only.

Details: https://codesandbox.io/s/serene-noether-s8pqc?file=/src/components/Payment/Payment.js

In my Payment.js

function Payment() {
  const [paymentImage, setPaymentImage] = useState({
    id: 0,
    value: ""
  });

  const handlePaymentImageChange = (e) => {
    const { name, value } = e.target;
    setPaymentImage({
      ...paymentImage,
      [name]: value
    });
  };

return (
    <div className="payment-container">
      <Dropdown
        title="Select payment"
        items={items}
        multiSelect={false}
        handlePaymentImageChange={handlePaymentImageChange}
      />

      {/* render specifed image based on the selected choice */}
      //REST RENDER CODE...
      // for example,     value = Visa -> render visa image only
      

    </div>
  );

In my Dropdown.js

import React, { useState } from "react";
import "./Dropdown.css";

function Dropdown({
  title,
  items = [],
  multiSelect = false,
  handlePaymentImageChange
}) {
  const [open, setOpen] = useState(false);
  const [selection, setSelection] = useState([]);
  const [selectedValue, setSelectedValue] = useState(title);

  //REST DROPDOWN TOGGLE FUNCTION
  ...

  return (
    <div className="dropdown-container">
      // pass the item.value to change the Payment state, then render the correct image
        {open && (
          <ul className="dropdown-list">
            {items.map((item) => (
              <li
                className="dropdown-list-item"
                key={item.id}
                onChange={() => handlePaymentImageChange(item.value)}
              >
                <button
                  type="button"
                  onClick={() => handleOnClick(item)}
                  value={item.value}
                >
                  <span>{item.value}</span>
                  <span>{isItemInSelection(item) && "Selected"}</span>
                </button>
              </li>
            ))}
          </ul>
        )
}
    </div>
  );
}

export default Dropdown;

Any solution?

updated my answer. Please check.

Md Sabbir Alam
– Md Sabbir Alam

2020-12-15 09:26:08 +00:00
Commented Dec 15, 2020 at 9:26 — Md Sabbir Alam
– Md Sabbir Alam, Commented Dec 15, 2020 at 9:26

Md Sabbir Alam · Accepted Answer · 2020-12-15 09:30:32Z

2

There are multiple issue,

In Dropdown component you should add eventListener for onClick not onChange.
Inside handlePaymentImageChange method you are using e.target.value for the value. But in your case e itself is the value. So you should write,

setPaymentImage({ ...paymentImage, value: e });
When you are rendering the image there is no check. So check if value is "Visa" and render visa image and so on.

I have updated the code here please check.

edited Dec 15, 2020 at 9:30

answered Dec 15, 2020 at 9:02

Md Sabbir Alam

5,0643 gold badges19 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Passing OnChange Function using React for drop down

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related