Using a variable as object name in React

Question

So this is an example of the problem I am having.

import { useState, useEffect } from "react";
import symbols from "./Symbols.js"

const DrawSymbol = (type) => {
const [state, setState] = useState("");

  useEffect(() => {
    const g = symbols.find((obj) => {     
    return obj[type];
    });

setState(g.url);

},[]);

return <div>{state}<div>

};

Symbol.js has svg data so Ill just truncate it for legibility

const symbols = [
  {
     "0":{
        "url":"data:image/svg+xml;base64,PHN2ZyB4bWxucz..."
     }
  },
  {
     "1":{
        "url":"data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cD....."
     }
  },
  {
     "2":{
        "url":"data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDov..= "
     }
  },
  {
     "2B":{
        "url":"data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0c.... "
     }
  },
 .....
]

export default symbols;

Symbols.js exports an array of objects to this file. The issue here is that if I were to manual say obj['name'] it works and it returns the requested object but if I try to use the passed variable name obj[type] it comes up as undefined. Using the debugger in Firefox I can see that the variable being passed does indeed have a String value, but it still never works. Its driving really mad.

can you share symbol.js file and how are you passng data to DrawSymbols aslso — Muhammad Usama Ashraf
– Muhammad Usama Ashraf, Commented Dec 23, 2021 at 5:56
You’re using find incorrectly. It’s hard to say for sure without seeing your symbols array, but perhaps you meant return obj.type === value to find the entry whose type matches value? — ray
– ray, Commented Dec 23, 2021 at 5:57
Ok I added the Symbols file. The variable name type has no meaning beyond just being the type of symbol I'm choosing and not related to the type of object. I keep forgetting i have to be very specific with my questions. — Arklight Dev
– Arklight Dev, Commented Dec 23, 2021 at 6:44

Rajitha Udayanga · Accepted Answer · 2021-12-23 06:09:18Z

2

const DrawSymbol = (props) => {
const [state, setState] = useState("");
    
useEffect(() => {
    if(props.type) {
        // `symbols` is a array of object. you need to find one object from that array
        const g = symbols.find((obj) => obj.type === props.type);
        setState(g?.text);
    }
}, [props]);

return <div>{state}<div>
};

Try this out.

answered Dec 23, 2021 at 6:09

Rajitha Udayanga

1,7622 gold badges15 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jsejcksn Over a year ago

This looks good except that setState(g?.text) is changing the type of state from string to string | undefined. Instead: setState(g?.text ?? '') Also [props.type] for the useEffect dependency list instead of just [props].

Arklight Dev Over a year ago

Thank you. This helped to solve my problem. Maybe I am wrong, but even though I called what is being passed as type, type is prop and prop is an object. Type would be a property of prop so to access the string I needed to write type.type. So in future I think ill just leave it as prop.

maxagno3 · Accepted Answer · 2021-12-23 06:19:35Z

I don't exactly know what you are up to without actually seeing your Symbol.js file. But a quick glance probably shows that shouldn't you be destructuring the type like const DrawSymbol = ({type}) => { ... rest of the code } if you are passing the type as props into this component.? If not then you are actually using the find method incorrectly. Find method finds the first element it matches according to the condition given. Here you actually are directly returning which would obviously return false since you are not giving any condition using which it would find it inside the array. The correct way would be -

useEffect(() => {
  if(type) {
      const g = symbols.find((obj) => obj.type === type);
      setState(g.text);
  }
}, [type]);

Here in the above code it would return exactly the thing you need since here we are giving the condition using which it would match it inside the array.

jsejcksn · Accepted Answer · 2021-12-23 06:26:28Z

0

You can solve this with useMemo:

import { useMemo } from "react";
import symbols from "./Symbols.js";

const DrawSymbol = ({type}) => {
  const symbolText = useMemo(() => symbols.find(s => s.type === type)?.text ?? '', [type]);
  return <div>{symbolText}<div>;
};

answered Dec 23, 2021 at 6:26

jsejcksn

34.6k5 gold badges55 silver badges79 bronze badges

Collectives™ on Stack Overflow

Using a variable as object name in React

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related