如何从一个组件传递 state 以设置另一个 state？

Question

I'm currently developing an app with a modal which contains a calendar. The user can essentially select a new date, which will update the state. However, it's not currently working as expected and I need to be able to pass the newDate state to another component to be able to update another state with the value.

When the user clicks the 'Change Date' button, it should update setDeliveryDate (modal.js) with newDate (from modalbutton.js) ie setDeliveryDate(newDate).

// modal.js

interface ModalProps {
  closeModal: () => void;
  confirmDateChange: (newDate) => void;
}

const Modal: FunctionComponent<ModalProps> = ({
  closeModal,
  confirmDateChange,
}) => {
  const [newDate, setNewDate] = useState(new Date());

  return (
    <StyledModal>
      <DatePicker onChange={setNewDate} value={newDate} />
      <button onClick={closeModal}>Cancel, Don't Change</button>
      <button onClick={() => confirmDateChange(newDate)}>Change Date</button>
    </StyledModal>
  );
};

export default Modal;

// modalbutton.js

const ModalButton: FunctionComponent = () => {
  const [openModal, setOpenModal] = useState(false);
  const [deliveryDate, setDeliveryDate] = useState(0);

  const handleOpenModal = () => {
    setOpenModal(true);
  };

  const confirmDateChange = (newDate) => {
    setDeliveryDate(newDate);
    setOpenModal(false);
  };

  const closeModal = () => {
    setOpenModal(false);
  };

  return (
    <StyledContainer>
      <TransitionGroup component={null}>
        {openModal && (
          <CSSTransition classNames="modal-container" timeout={300}>
            <Modal
              closeModal={closeModal}
              confirmDateChange={confirmDateChange}
            />
          </CSSTransition>
        )}
      </TransitionGroup>
    </StyledContainer>
  );
};

export default ModalButton;

Answer 1

It looks like you're passing the state update function correctly, but that function needs a value called newDate :

const confirmDateChange = () => {
    setDeliveryDate(newDate);
    setOpenModal(false);
};

That value doesn't exist anywhere that function can see. Add it as a parameter to the function:

const confirmDateChange = (newDate) => {
    setDeliveryDate(newDate);
    setOpenModal(false);
};

After that, it looks like you're intending to pass the newDate value from the Modal component, but this isn't how you do that:

<button onClick={confirmDateChange} newDate={newDate}>

What you're doing here is passing it as a property to <button> , which has no such property and won't do anything with it. To pass it as a function argument to confirmDateChange , wrap that call in a function and add the argument:

<button onClick={() => confirmDateChange(newDate)}>

Answer 2

David is correct, you are trying to pass value to a function without declaring it as a parameter first, so setDeliveryDate(newDate) would always just return the original value passed to newDate here const [newDate, setNewDate] = useState(new Date());

You can also look into React Context if you want to keep passing around data from one component to another. I found it quite helpful to keep the logic in one file and have the components work with it, rather than having the components work with each other directly