Passing values from react components to constants file

Question

I've moved all my static text to the constants file and I've to pass user's first name and last name to one particular key. I've tried using string literal but its not working. Is there any way to pass the values from react to the constants file.

constants.js

export constants={
'employeeName': `Hello welcome ${employee.firstname}, ${employee.lastname}`
}

React component

import constants from './constants.js'

const employee={
firstname:props.firstname,
lastname: props.lasname
}

<div>{constants.employeeName}</div>

where is employee in constants.js? and you forgot const after export — HDM91, Dec 27 '21 at 11:08
employee is from the react component not in this constants... thats what my question is about :) — Hema Nandagopal, Dec 27 '21 at 11:26

score 1 · Answer 1 · edited Dec 27 '21 at 13:16

1

constant.js:

export const constants= { employeeName: 'Hello welcome'}

React Component:

import constants from './constants.js'

const employee={firstname:props.firstname,lastname: props.lasname}

<div>{`${constants.employeeName} ${employee.firstname}, ${employee.firstname}`}</div>

edited Dec 27 '21 at 13:16

HDM91

1,318
9
16

answered Dec 27 '21 at 11:17

MohitFBorse

31
3

HDM91 · Accepted Answer · 2021-12-27T11:42:15.663

If you insist to use a string constants in separate file and use and format it in another component you can use the parse method from this post or some string format library like hydrate-text like this:

constants.js

export const constants = {
  employeeName: `Hello welcome %s, %s`,
};

util.js;

export function parse(str) {
  var args = [].slice.call(arguments, 1),
    i = 0;

  return str.replace(/%s/g, () => args[i++]);
}

component:

import { parse } from "util";
import constants from "./constants.js";

const Employee = () => {
  const employee = {
    firstname: props.firstname,
    lastname: props.lasname,
  };

  return (
    <div>
      {parse(
        constants.employeeName,
        employee.firstname,
        employee.lastname
      )}
    </div>
  );
};

In my opinion it's not a clean and performant way of doing this, you can just use a function and pass employee to it like the other answers:

score 0 · Answer 3 · answered Dec 27 '21 at 11:14

You can create a method and pass an argument on that.

Example :

    const getFullName = (employee) => {
     return {
       'employeeName': `Hello welcome ${employee.firstname}, ${employee.lastname}`
     }
    };
    
    const employee = {
     firstname: "asif",
     lastname: "vora"
    };
    
    const { employeeName } = getFullName(employee);

    console.log(employeeName);

Passing values from react components to constants file

3 Answers3