Development Tips for React Developers

1. Updating an object with setState in React

> For example

Given the state ,

this.state = {jasper:{name: 'jasper', age:28}}

You can update an object using 2 methods

  1. Object.assign()
  2. Spread Operator

1 > Object.assign

this.setState(prevState => {
let jasper = Object.assign({}, prevState.jasper) = 'someothername'
return { jasper }

2 > Spread Operator

this.setState(prevState => ({
jasper: { ...prevState.jasper,
name: 'something'

2. Updating a nested object in React

  • Object.assign & Spread Operator creates only shallow copy

> For example

Given the nested object ,

this.state = {
  • update extraCheese of Pizza object (using Spread Operator)

> Spread Operator for nested object

this.setState(prevState => (

3. Deploy App on a subdirectory

  • If you want to deploy App on a Subdirectory such as

You can deploy app on a subdirectory using 2 methods

  1. Set the base name basename
  2. Set the app homepage in package.json

1 > Set the base name

<Router basename={'/directory-name'}> 
<Route path='/' component {Home} />
  • Setting the basename attribute on the <Router /> component tells React Router that the app will be served from a subdirectory

2 > Set the app homepage in package.json

  • In package.json file, set the property homepage
  • npm run build command comes from creact-react-app and npm run build use homepage property to make sure the production build points to the correct location
  • By default, CRA (Create React App) produces a build assuming your app is hosted at the server root
  • To override this, specify the homepage in your packge.json
"homepage" : ""

4. Render nested object

  • Sometimes, you will find the data in nested object type
  • Object is NOT so easy to iterate compared to array in JavaScript. So I recommend you to convert the object into an array using Object.keys() method

Given the nested object,

const fruits = {

> Object.keys() and use the key to map

render() {
<tr key={fruit_name}>
<b> Template: {fruit_name} </b>
<tr key={}>

5. Simple nested Mapping

const mscList =, ind) => ( => (
<MSCItem classData={classData} />

6. Detect Route Change

  • For many times, you will find a needs to detect route change and do something (i.e., change the state “loading” into false whenever there is a page refresh or route change)
  • To detect route change in React, you need to use listen method in history property

For example,

  • I want to change my state expanded to false whenever there is a route change

> listen method in history property

this.props.history.listen((location, action) => {
// console.log('history changed')
// routeChange function
routeChange = () => {
const { BaseActions } = this.props
BaseActions.sideBar({expanded: false})

7. history push INSTEAD OF window.location

  • The main difference between history.push and window.location is that
  • Use history API history.push('/') to refresh the page for a better UX

8. Query String

  • Query String is often used for passing parameters (data) around both in CLIENT & SERVER side
  • Installation — npm install query-string
  • I used Query String to filter data using the selected options
  • For example, if a user choose Europe , I pass Europe as a queryString ...URL...?Region=Europe and filter the data using the value of Region in URL

> query string

  • push the state or props to URL using history.push method
resetBtn = () => {
const { history, schoolid,
selectedAgeValue, selectedDomain } = this.props;
  • then use it using queryString (e.g., queryString.parse method
  • In this example, I get the values for key age & domain and update Redux
import queryString from 'query-string'const params = queryString.parse( param_selectedAgeValue = params.ageconst param_selectedDomain = params.domainreturn state.set('param_selectedAgeValue', param_selectedAgeValue)



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Anil Kumar

Anil Kumar

Experience with Front-end Technologies and MERN / MEAN Stack. Working on all Major UI Frameworks like React, Angular.