Блог

Я пытаюсь создать средство выбора месяца, используя библиотеку, react-month-picker

Рабочий код в react: https://codesandbox.io/s/react-month-picker-forked-84rqr

И я скопировал тот же код в следующий проект Js (React SSR) https://codesandbox.io/s/nice-bartik-o5miw но он выдает ошибку как,

недопустимое значение свойства «value» в month-picker

index.js (Код связан только с выбором месяца)

 import React, { useState } from "react";
import ReactDOM from "react-dom";
import ReactMonthPicker from "react-month-picker";
import "react-month-picker/css/month-picker.css";

const MonthPicker = ({ range }) => {
  const [isVisible, setVisibility] = useState(false);
  const [monthYear, setMonthYear] = useState({});

  const showMonthPicker = event => {
    setVisibility(true);
    event.preventDefault();
  };

  const handleOnDismiss = () => {
    setVisibility(false);
  };

  const handleOnChange = (year, month) => {
    setMonthYear({ year, month });
    setVisibility(false);
  };

  const getMonthValue = () => {
    const month = monthYear amp;amp; monthYear.month ? monthYear.month : 0;
    const year = monthYear amp;amp; monthYear.year ? monthYear.year : 0;

    return month amp;amp; year ? `${month}-${year}` : "Select Month";
  };

  return (
    <div className="MonthYearPicker">
      <button onClick={showMonthPicker}>{getMonthValue()}</button>

      <ReactMonthPicker
        show={isVisible}
        lang={[
          "Jan",
          "Feb",
          "Mar",
          "Apr",
          "May",
          "Jun",
          "Jul",
          "Aug",
          "Sep",
          "Oct",
          "Nov",
          "Dec"
        ]}
        years={range}
        value={monthYear}
        onChange={handleOnChange}
        onDismiss={handleOnDismiss}
      />
    </div>
  );
};

function App() {
  const range = {
    min: { year: 2020, month: 3 },
    max: { year: 2025, month: 2 }
  };

  return (
    <div className="App">
      <MonthPicker range={range} />
    </div>
  );
}
  

Кажется простой проблемой, но я не мог понять, где я ошибаюсь.

Проблема в том, что он работает в react codesandbox, но не в следующем JS codesandbox.

Не могли бы вы, пожалуйста, помочь мне выбрать месяц и год из средства выбора?

const [MonthYear, setMonthYear] = useState({месяц: «, год: 0});