Javascript - Can I manipulate props and then pass to child component in HOC

Meg
August 9, 2024
196 views
0 votes
2 Answers

I am trying to create this HOC–>

export const hocGrid = (Grid) => {

    return ({ data, config, id = uuidv4(), adaptableReady, autosizeAllColumns, removeLoader }) => {
        return (
            <Grid data={data} config={config} id={id} adaptableReady={adaptableReady} autosizeAllColumns={autosizeAllColumns} removeLoader={removeLoader} />
        )
    }
}

this Grid component receives data and config as props, data is array of object and config is object

I want to modify these data and config and then pass to Grid. Is this possible through HOC?

Tags: javascript reactjs

Answers

You can manipulate props in a Higher-Order Component before passing them down to the child component.

export const hocGrid = (Grid) => {
  return ({ data, config, id = uuidv4(), adaptableReady, autosizeAllColumns, removeLoader }) => {
    
    //Manipulate you data here
    const modifiedData = data.map((item ,i)=> {
      // you can do whatever you want here
      return {
        ...item,
        // Example: add a new property id to each item
        id: 1,
      };
    });

    // Modify the config prop here
    const modifiedConfig = {
      ...config,
   
      additionalConfig: true,
    };

    return (
      <Grid 
        data={modifiedData} 
        config={modifiedConfig} 
        id={id} 
        adaptableReady={adaptableReady} 
        autosizeAllColumns={autosizeAllColumns} 
        removeLoader={removeLoader} 
      />
    );
  };
};

You can modify data and config in the body of the inner function

export const hocGrid = (Grid) => {
  return ({ data, config, id, adaptableReady, autosizeAllColumns, removeLoader }) => {
    const newData = data.map((item) => ({
      ...item,
      // add new items here if needed
    }));

    const newConfig = {
      ...config,
      // add new property and value here if needed
    };

    return (
      <Grid
        data={newData}
        config={newConfig}
        id={id}
        adaptableReady={adaptableReady}
        autosizeAllColumns={autosizeAllColumns}
        removeLoader={removeLoader}
      />
    );
  };
}

Please signup or login to give your own answer.

Click here to cancel reply.

Javascript – Can I manipulate props and then pass to child component in HOC

Answers