How to make a sticky footer in react?

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’;). var style = { backgroundColor: “#F8F8F8”, borderTop: “1px solid #E7E7E7”, textAlign: “center”, padding: “20px”, position: “fixed”, left: “0”, bottom: “0”, height: … Read more

Declaring Const With Curly Braces in JSX

It is destructuring assignment. The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables. Example (ES6): var person = {firstname: ‘john’, lastname: ‘doe’}; const firstname = person.firstname; const lastname = person.lastname; // same as this const { firstname, lastname } = … Read more

Using boolean-value of attributes in JSX

You can just omit the value assignment; the attribute will be assigned a value of true by default. Instead of doing any of: <input data-enable-time=true /> <input data-enable-time=”true” /> <input data-enable-time={true} /> Do: <input data-enable-time /> This approach avoids the warning Value must be omitted for boolean attributes [react/jsx-boolean-value] when the code is linted via … Read more

React TypeScript HoC – passing Component as the prop

You want to pass a component constructor, not a component instance: import * as React from ‘react’; import { Route, RouteProps } from ‘react-router’; interface Props extends RouteProps { component: React.ComponentType; } const PrivateRoute = ({ component: Component, …rest }: Props) => { return ( <Route {…rest} render={(props) => <Component {…props} />} /> ); }; … Read more

How to add additional props to a React element passed in as a prop?

Pass in the component constructor instead of an instance: class Menu extends React.Component { render() { return( <div className=”Menu”> <MenuItem icon={MdInbox} /> <MenuItem icon={MdDrafts} /> <MenuItem icon={MdTrash} /> </div> ); } } The child class: class MenuItem extends React.Component { render() { // This constant must begin with a capital, // it’s how React distinguishes … Read more

TypeScript vs JSX [closed]

The original answer is insufficient and not up to date with the current standards. JSX is NOT a language. It’s NOTHING BUT Javascript but with a different extension. Facebook came up with this new extension so that they can demarcate the XML-like implementation of HTML in JavaScript. In early versions of React, this extension was … Read more