Here’s an idea (sandbox example link). Include a phantom div in your footer component that represents the footer’s position that other dom elements will respect (i.e. affecting page flow by not being position: ‘fixed’;).
In class components, you can call this.forceUpdate() to force a rerender. Documentation: https://facebook.github.io/react/docs/component-api.html In function components, there’s no equivalent of forceUpdate, but you can contrive a way to force updates with the useState hook.
Cloning children with new props You can use React.Children to iterate over the children, and then clone each element with new props (shallow merged) using React.cloneElement. For example: Calling children as a function Alternatively, you can pass props to children with render props. In this approach, the children (which can be children or any other prop name) is a function which … Read more