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?

Answer 1

There are multiple issue,

1. In Dropdown component you should add eventListener for onClick not onChange.

2. 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 });

3. 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.