re-render component in react to get default props again

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

Does this answer your question? https://stackoverflow.com/questions/46240647/react-how-can-i-force-render-a-function-component — Tracer69, Feb 15 '20 at 20:37
Does this answer your question? [React - How can I force render a function component?](https://stackoverflow.com/questions/46240647/react-how-can-i-force-render-a-function-component) — Michael Nelles, Feb 15 '20 at 20:38
I read this before and also https://reactjs.org/docs/react-component.html#forceupdate but as you see my code has state and when it changes calendar component doesn't reload props — Hamid Shoja, Feb 15 '20 at 20:41

score 0 · Answer 1 · answered Feb 17 '20 at 19:06

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>

re-render component in react to get default props again

1 Answers1