How do i pass data values to modals using react hooks?

Question

I am working on using modals to accept form inputs on a react project

here is the plan component

plan/index.js

import React, { useState } from "react";
import Pay from '../Pay';


const Plan = () => {

  const [payModal, setPayModal] = useState(false);
  const [planMode, setPlanMode] = useState(true);

  return (
  <main class="main">

    {payModal && <Pay setOpenPayModal={setPayModal} />}

  <div class="plan">
   <div>
    <a class="plans" onClick={() => {setPayModal(true);}}>plan A</a>
              
    <div class="plan">
          <span class="plan">{!planMode ? "$19.99" : "$9.99"}</span>
          <span class="plan">{!planMode ? "month" : "year"}</span>
    </div>
   </div>
   <div>
    <a class="plans" onClick={() => {setPayModal(true);}}>plan B</a>
              
    <div class="plan">
          <span class="plan">{!planMode ? "$29.99" : "$19.99"}</span>
          <span class="plan">{!planMode ? "month" : "year"}</span>
    </div>
   </div>


  </div>
  </main>
  );
};
export default Plan;

as you can see on the line {payModal && <Pay setOpenPayModal={setPayModal} />} where i call the pay modal component from the plan component and it opens up the modal

here is the pay component which is the modal component

pay/index.js

import React, { useState } from "react";



function Pay({ setOpenPayModal }) {

  const [billingDetails, setBillingDetails] = useState({
    price: "",
    : "",
  });

  return (

    <div class="modal">
      <div class="modal">
        <div class="close">
          <button
            onClick={() => {
              setOpenPayModal(false);
            }}
          >
          </button>
        </div>


        <div class="modal">

        <form class="form" onSubmit={handleSubmit}>
            <fieldset class="form">

                <Field
                label="Price"
                id="price"
                type="text"
                value={billingDetails.price}
                onChange={(e) => {
                    setBillingDetails({ ...billingDetails, price: e.target.value });
                }}
                />

                <Field
                label="Frequency"
                id="frequency"
                type="text"
                value={billingDetails.frequency}
                onChange={(e) => {
                    setBillingDetails({ ...billingDetails, frequency: e.target.value });
                }}
                />

            </fieldset>
            <button class="pay" onClick={handleSubmitPay}>
                Pay
            </button>
        </form>

        </div>

      </div>
    </div>
  );
}

export default Pay;

The issue is I want to be able to pass the values price and frequency from the plan component to the pay modal component

for example for plan A is price="$19.99" and frequency="year", so based on the button clicked on the plan component page, those values get passed to the pay modal component in a dynamic way

how do I achieve this using react hooks?

Answer 1

You can use contexts to pass, but in this case I don't think it's the best option. What I really recommend is passing the state variable through the props.

{payModal && <Pay setOpenPayModal={setPayModal} price={price} frequency={frequency} />}

I usually use the Context (useContext) when I need values and various components, for example:

• I need to save the user id that is logged in to various components, and instead of getting it from the server every time I need it, I keep it saved in my context that I created, so I can make the call only once. Documentation-> https://pt-br.reactjs.org/docs/context.html