Im trying to implement a DatePicker in a teams App - reactjs

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.