在反应中重新渲染组件以再次获得默认道具

Question

I'm using package react-calendar I'm gonna customize it to select just month, for example 2020-02 or 2020-05 , ... and also It should be hidden first and displayed when I click the button (Icon). so I wrote a component to toggle it, named Dropdown , plus I set view prop of calendar to show months of year when it appears and when I click on a month, the hide state changes and Dropdown will close and a month would be selected.

However the problem is when I wanna click again on the button select another month , the calendar starts from days not month view because after selecting month it goes to select day. actually it needs to re-render or set again 'year' to it's view props.

Is there any way to re-render Calendar component when state changes.

import section:

import ReactCalendar from "react-calendar";

state section:

const [hide, sethide] = useState(false);

return section:

<Dropdown
    forceHide={hide}
    onChangeShow={() => sethide(false)}
    toggle={   
        <Icon name="calendar" size={32} />    
    }
  >
    <ReactCalendar
      view={'year'}
      onClickMonth={value => {
        console.log("value", value);
        sethide(true);            
      }}
    />
  </Dropdown>

any helps is appreciated.

[first toggle dropdown shows months] 1

[enter image description here] 2

Answer 1

I solve my problem in this way but I'm not sure it's an optimize solution if you have any idea please share with me.

I defined a function to clone it in each render occurs:

const RenderReactCalendar = ({view})=>{
 let Render = (
    <ReactCalendar
      onClickMonth={value => {
        console.log("value", value);
        sethide(true);            
      }}    />
  );

  return React.cloneElement(Render, { view }, {});
};

and then refactor my component:

<Dropdown
    forceHide={hide}
    onChangeShow={() => sethide(false)}
    toggle={   
        <Icon name="calendar" size={32} />    
    }
  >
    <RenderReactCalendar
      view={'year'}
    />
  </Dropdown>