score:1

const FormContext = React.createContext({});

const BookingComponent = () => {
  const [values, setValues] = useState();
  
  const handleChange = useCallback((e) => {
    //handle child event in parent and save child state in
    //parent to use later in submit button
  }, []); //set dependency if it's needed

  const contextValue = useMemo(() => ({ handleChange }), [handleChange]);

  return (
    <FormContext.Provider value={contextValue}>
      <div>
        <CRContainer className="booking-crcontainer">
          <CRColumn>
            <PickUpCarComponent />
          </CRColumn>
          <CRColumn>
            <CustomerInfo />
          </CRColumn>
        </CRContainer>
        <CRContainer className="booking">
          <Button type="submit" btnText="hello there" />
        </CRContainer>
      </div>
    </FormContext.Provider>
  );
};

const LabeledInput = (props) => {
  const formContext = useContext(FormContext);
  const { labelText, type, inputPlaceholder, className } = props;

  return (
    <div className={`input-container ${className}`}>
      <label htmlFor="labelText">{labelText}</label>
      <input
        type={type}
        placeholder={inputPlaceholder}
        onChange={formContext.handleChange}
        ref={ref}
      />
    </div>
  );
};

Related Query

More Query from same tag