react-flexbox | React flexbox implementation | Frontend Framework library

Well, the Typescript compiler is actually telling you what is wrong, but its understandable to not see when you just started using Typescript.

Issue lies in your Component, you return at the moment, JSX Element | JSXElement[] as the compiler says. React.FC must have valid "React Element" returned. If you change this:

You don't need to pass trueCond to renderCheckbox. You are passing it before the state has been updated.

Replace retrun trueCond with return condition.

You also need to use a callback in the state setter. In this code:

Your error means that webpack does not know how to parse css files.

To resolve this problem you need to npm install --save-dev style-loader css-loader and in your webpack file include those loaders as follows

I don't see braintree in package.json, it is working in your team member's pc because they maybe installed it separately. Sometimes I tend to forget adding it to package.json when I develop a feature because it takes experimenting with bunch of packages so the package is in my node_modules folder already. Also there is a possibility that someone forgot to git add the package.json.

Anyway, To add to your package.json do and push,

It looks like the Elements component updates its state when a nested Stripe Element gets mounted, causing Router to be re-rendered, causing the unmounting and remounting of the Billing and its sub-Elements, causing the loop.

Putting the Elements component inside the Route should solve the problem.

For example in Route.js:

You are using bindActionCreators wrong. It takes an object as the first argument. The properties of the object are the action creators themselves.

And returns an object just like mapDispatchToProps does.

This might work

I don't know whether your problem is solved or not. Today i faced the same issue the problem was ~/.npm folder is messing with permission so I changed permission as sudo chown -R $(whoami) ~/.npm and it is working fine.

React Flexbox Grid can be used to make your website responsive. It is derived from the grid system followed by Bootstrap.

The grid system divides the screen into 12 columns and you can mention how much width can be taken for components in mobile devices, tablets and desktops. The breakpoints for xs, sm, md, lg and xl are 576px, 768px, 992px and 1200px.

You can see the difference by resizing the browser window of the page https://roylee0704.github.io/react-flexbox-grid/

Its same as the below media query

In your package.json file