Is it possible to convert a string to a reference variable name in react?

Question

I have a reference variable:

const weightInputRef = useRef();
const weightInputRef = useRef();

I have some data:

const inputs = [{
    ref: heightInputRef,
    type:'number',
    placeholder: 'Height',
    name: 'height'
  },
  {
    ref: weightInputRef,
    type:'number',
    placeholder: 'Weight',
    name: 'weight'
  }]

I am using it to setup connection between the following HTML elements:

{inputs.map((item, index) => <Input
  name={inputs[index].name}
  placeholder={inputs[index].placeholder}
  type={inputs[index].type}
  inputRef={inputs[index].ref}
/>
)}

Will it be possible to send the variable name directly instead? Like:

ref=item.name+"InputRef"

I think it can save a lot of code. Is there any way I can achieve that?

Here is my Input component:

export default function Input(props) {
  return (
    <input
      className={classes.input} 
      placeholder={props.placeholder} 
      type={props.type} 
      ref={props.inputRef}
      name={props.name}
    />
  )
}

score 2 · Accepted Answer · answered Jul 24 '23 at 07:22

2

As Nick Parsons has suggested:

Creating an object with refs:

const refsObject = {
  weight: weightInputRefs,
  height: heightInputRefs
}

the modified code can be:

{inputs.map((item, index) => <Input
  ref={refsObject[item.name]}
/>
)}

answered Jul 24 '23 at 07:22

Millennial

79
7

Muhammad Jawad Mansoor · Answer 2 · 2023-07-24T10:17:31.573

-1

EDIT As pointed by Nick Parsons you can create a lookup object to store the reference variables and access them using their names as keys.Here the final code component

    import React, { useRef } from 'react';
    
    const heightInputRef = useRef();
    const weightInputRef = useRef();
    
    const inputRefs = {
  weight: weightInputRefs,
  height: heightInputRefs
    }
    
    const inputs = [
      { type: 'number',
        placeholder: 'Height',
        name: 'height'
      },
      { type: 'number',
        placeholder: 'Weight',
        name: 'weight'
      }
    ];
    
    export default function Input(props) {
      return (
        <input
          className={classes.input}
          placeholder={props.placeholder}
          type={props.type}
          ref={props.inputRef}
          name={props.name}
        />
      );
    }
    
    function YourComponent() {
      return (
        <div>
          {inputs.map((item, index) => (
            <Input
              key={index}
              name={item.name}
              placeholder={item.placeholder}
              type={item.type}
              inputRef={inputRefs[item.name]} // Access the reference variable from the lookup object
            />
          ))}
        </div>
      );
    }

edited Jul 24 '23 at 10:17

answered Jul 24 '23 at 06:27

Muhammad Jawad Mansoor

235
1
7

1

are there any side effects of using this method in this particular way? – Millennial Jul 24 '23 at 06:35
3

@Millennial Generally, you're best to avoid using `eval` when there are alternatives (it can execute any JS, so you need to be sure you trust the data in `item.name`, if it comes from user-input for example then you can't trust it). In this case there is a better option which is to create an object with your refs in them, them use bracket notation to reference them: https://stackoverflow.com/questions/5187530/variable-variables-in-javascript – Nick Parsons Jul 24 '23 at 06:43
This doesn't look appropriate at all. Avoid using eval specially when you execute a dynamic value such as item.name – Osakr Jul 24 '23 at 06:55
1

Thanks @NickParsons. I have updated the code accordingly. – Muhammad Jawad Mansoor Jul 24 '23 at 10:18

Is it possible to convert a string to a reference variable name in react?

2 Answers2