Dynamically add child components in React


Dynamically add child components in React. You need to pass your components as children, like this: And then append them in the component’s body: You don’t need to manually manipulate HTML code, React will do …

How to manually trigger click event in ReactJS?


If you want to manually trigger click event in ReactJS? You could use the ref prop to acquire a reference to the underlying HTMLInputElement object through a callback, store the reference as a class property, …

How to conditionally wrap a React component?


Want to conditionally wrap a React component? Use this component: conditional-wrap. A simple React component for wrapping children based on a condition.

Active link with React-Router?


Active link with React-Router? no longer has the activeClassName or activeStyle properties. In react-router v4 you have to use if you want to do conditional styling: I added an exact property to the home , …

How to export a pure stateless component in React?


How to export a pure stateless component in React? ES6 doesn’t allow export default const. You must declare the constant first then export it: }; export default Header; This constraint exists to avoid writing export …

How to access store state in React Redux?


Want to access store state in React Redux? You should create separate component, which will be listening to state changes and updating on every state change:

How to access state inside Redux reducer?


If you want to access state inside Redux reducer? I would use thunk for this, here’s an example: Basically you get all the data you need on the action, then you can send that data …

How to send the bearer token with axios?


Want to send the bearer token with axios? The first parameter is the URL. The second is the JSON body that will be sent along your request.

How to cancel a fetch on componentWillUnmount?


If you want to cancel a fetch on componentWillUnmount? When you fire a Promise it might take a few seconds before it resolves and by that time user might have navigated to another place in …

How to render repeating React elements?


Want to render repeating React elements? You can put expressions inside braces. Notice in the compiled JavaScript why a for loop would never be possible inside JSX syntax; JSX amounts to function calls and sugared …

Reactjs async rendering of components


Reactjs async rendering of components There are two ways to handle this, and which you choose depends on which component should own the data and the loading state. Step 1. Move the Ajax request into …

How to store Configuration file and read it using React?


If you want to store Configuration file and read it using React? With webpack you can put env-specific config into the externals field in webpack.config.js If you want to store the configs in a separate …

How to pass class names to react components?


Want to pass class names to react components? In React, when you want to pass an interpreted expression, you have to open a pair of curly braces. Try: Using the classnames npm package

How to render react components by using map and join?


If you want to render react components by using map and join A simple solution is to use reduce() without second argument and without spreading the previous result: Without second argument, reduce() will start at …

PropTypes in functional stateless component


In this example, We haves shared propTypes in functional stateless component in Reactjs. The official docs show how to do this with ES6 component classes, but the same applies for stateless functional components. Firstly, npm …