CODEWITHSUNDEEP
javascriptreactjs
Daniel Demonceau
Daniel Demonceau

Reputation: 188

How to access hook variable from imported functional component?

How do I access the selected date of a DateTimePicker from an imported functional component?

Here is the functional component with the DateTimePicker

import React, { useState } from "react";
import { DateTimePicker, MuiPickersUtilsProvider } from "@material-ui/pickers";
import DateFnsUtils from '@date-io/date-fns';

 export default function BasicDateTimePicker() {
     
    var date = new Date()
    const [selectedDate, handleDateChange] = useState(new Date(date.setMonth(date.getMonth() + 6)));

    return (
        <MuiPickersUtilsProvider utils={DateFnsUtils}>
            <DateTimePicker
                allowKeyboardControl
                ampm
                animateYearScrolling
                initialFocusedDate
                value={selectedDate}
                disablePast
                onChange={handleDateChange}
                format=" dd/MM/yyyy hh:mm:ss a "
                showTodayButton
            />
        </MuiPickersUtilsProvider>
    );
}

And here is the piece of code I want to use the selectedDate from

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import * as serviceWorker from './serviceWorker';
import BasicDateTimePicker from './components/BasicDateTimePicker';

ReactDOM.render(
  <React.StrictMode>
    <BasicDateTimePicker />
    <h1>{selectedDate}</h1>
  </React.StrictMode>,
  document.getElementById('root')
);

serviceWorker.unregister();

I read about props, but this helps carrying over variable in the opposite direction

Upvotes: 0

Views: 546

Answers (1)

brijesh-pant
brijesh-pant

Reputation: 1145

React works in a unidirectional flow. So, you need to call a callback handler as a prop to achieve that.

You should modify your code a bit to this:

export default function BasicDateTimePicker({
  selectedDate,
  handleDateChange
}) {

  return (
      <MuiPickersUtilsProvider utils={DateFnsUtils}>
          <DateTimePicker
              allowKeyboardControl
              ampm
              animateYearScrolling
              initialFocusedDate
              value={selectedDate}
              disablePast
              onChange={handleDateChange}
              format=" dd/MM/yyyy hh:mm:ss a "
              showTodayButton
          />
      </MuiPickersUtilsProvider>
  );
}

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import * as serviceWorker from "./serviceWorker";
import BasicDateTimePicker from "./components/BasicDateTimePicker";

const DateTime = () => {
  var date = new Date();
  const [selectedDate, handleDateChange] = useState(
    new Date(date.setMonth(date.getMonth() + 6))
  );

  return (
    <>
      <BasicDateTimePicker selectedDate={selectedDate} handleDateChange={handleDateChange} />
      <h1>{selectedDate}</h1>
    </>
  );
};

ReactDOM.render(
  <React.StrictMode>
    <DateTime />
  </React.StrictMode>,
  document.getElementById("root")
);

serviceWorker.unregister();

Upvotes: 2

Related Questions