Im trying to implement a DatePicker in a teams App

Question

Hi I'm creating a Teams App and im having trouble implementing a DatePicker in one of my screen. My basic test screen:

import React from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

export default function TestScreen() {
    let [selectedDate, setSelectedDate] = useState("");    
    
    return(
            <div>
                <h1>TEST SCREEN</h1>
                <div>
                    <DatePicker 
                    selected={selectedDate}
                    onChange={date => setSelectedDate(date)}
                    />
                </div>
            </div>            
        )
}

the tab component:

import React from "react";
// https://fluentsite.z22.web.core.windows.net/quick-start
import { Provider, teamsTheme } from "@fluentui/react-northstar";
import { HashRouter as Router, Redirect, Route } from "react-router-dom";
import Tab from "./Tab";
import "./App.css";
import { useTeams } from "@microsoft/teamsfx-react";
import "bootstrap/dist/css/bootstrap.min.css"
import TestScreen from "./screens/test";

export default function App() {
  const { theme } = useTeams({})[0];
  return (
    <Provider theme={theme || teamsTheme} styles={{ backgroundColor: "#eeeeee" }}>
      <Router>
          <TestScreen />
      </Router>
    </Provider>
  );
}

[The error I get][1] [1]: https://i.stack.imgur.com/Sc7cX.png

Answer 1

For those wondering, I fixed my issue replacing the by a simple. Not the solution i wanted to use at first but at least it's working fine. Might be a compatibility issue between Teams toolkit, React and some packages..

Answer 2

I see you haven't imported useState in your file. Also add current date as the default value of the selectedDate state. Try this

import React, { useState } from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

export default function TestScreen() {
  let [selectedDate, setSelectedDate] = useState(new Date());    

  return(
        <div>
            <h1>TEST SCREEN</h1>
            <div>
                <DatePicker 
                selected={selectedDate}
                onChange={date => setSelectedDate(date)}
                />
            </div>
        </div>            
    )
}

In case you're still not able to use it check if you're using an older version of react. Since hooks are supported in React 16.8.0 or higher.