error while accessing an object containing html values in a reactjs component

In javascript, the keys of an object can only be strings or number same work for typescript

export interface Config {
  // here you can use any string type 
  [key: string]: JSX.Element;
  // here you can use key as a number
  [key: number]: JSX.Element;

Now let’s see your object have interface Config

const object: Config = {
  // here editComponent, addComponent is object key
  editComponent: <div className="">.....</div>,
  addComponent: <div className="">.....</div>

take string type and use it as an index key

const type: string = 'addComponent'

then you can access indexing on object “Object”

 const keyComponent: JSX.Element = condition ? object[type] : <></>
 // or
 const editComponent: React.Component = object['editComponent']

use object key-value pair where the key is accepting type and value is the return type

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top