Adding dynamic properties in React Js

Last updated : Jul 30, 2023 12:00 AM

You can add dynamic properties to an object with [name: string] : string. Replace the string data type as required.

Here is how to define an interface that allows me to add dynamic properties to it.

interface DynamicAddress {
  [name: string] : string
}

Then I can add dynamic properties to it like:

person.lastName = "Last Name"
person.houseNumber = "Street No"

That can be useful when calculating property values based on other property values.

Here is an example of how to use dynamic properties in a React Js application.

My presentation component knows nothing about business logic. It displays what it receives.

interface DynamicAddress {
  [name: string] : string
}
export const Person = (props: DynamicAddress) =>{
  const data = Object.keys(props).map((key) => 
      <tr key={key}><td>{props[key]}</td><td><input/></td></tr>
  )
  return(
    <table>
      {data}
    </table>
  )
}

I use the dynamic properties to populate the DynamicAddress interface. That way, I can add any property name and value pair depending on my requirements.

import {Person} from "./components/SuccessMessage"
import Styles from "./components/Typrscript"

interface DynamicAddress {
  [name: string] : string
}
export const App = () => {
const createPersonProfile = (country: string): DynamicAddress => {
  const address: DynamicAddress = {}
  address.firstName = "First Name"
  if(country === "USA"){
    address.lastName = "Last Name"
    address.houseNumber = "Street No"
    address.street = "Street"
    address.state = "State"
    address.zip = "Zip"
    address.phone = "Phone"
    address.alternatePhone = "Cell"
  }
  else{
    address.lastName = "Family Name"
    address.houseNumber = "No"
    address.street = "Road"
    address.state = "Province"
    address.zip = "Post Code"
    address.phone = "Tel"
    address.alternatePhone = "Mobile"
  }
    address.city = "City"
  return address
}
return(
  <>
    <Person
      {...createPersonProfile("USA")}
    />
  </>
)
}
export default App

Figure 1: React Js dynamic styles and properties

Deleting a dynamic property from an object

I can delete any property from my object with the delete statement.
delete address.city will delete the city property from the DynamicAddress object.

Using dynamic properties for styles

Another practical usage of dynamic properties is to add CSS styles to a component, particularly when the style properties are calculated.

interface StyleProps {
    country: string
}
export const Styles = (props: StyleProps) => {
interface CssStyles {
    [name: string] : string
}
 const getCssStyles = (country: string): CssStyles => {
    const styles: CssStyles = {}
    if(country === "USA"){
        styles.backgroundColor = "blue"
        styles.fontStyle= "itslic"
    }
    if(country === "CANADA"){
        styles.backgroundColor = "red"
        styles.fontStyle= "bold"
    }
    if(country === "JAPAN"){
        styles.backgroundColor = "pink"
        styles.fontStyle= "normal"
    }

    return styles
 }

 return(
    <div style={{...getCssStyles(props.country)}}>Styles</div>
 )
}
export default Styles

That simplifies the typical usage of the component.

Placeholder 6

<Styles country="CANADA"/>
<Styles country="USA"/>
<Styles country="JAPAN"/>

Adding dynamic properties in React Js

Deleting a dynamic property from an object

Using dynamic properties for styles

Related Links

By: Lance