How to set element name dynamically in ReactJS

Question

How can I set element name dynamically in reactjs ? I'm using this library to show cryptocurrecy icons as a list. Using the library we can get Bitcoin icon as <Btc /> and so on. Lets say I've define an array of Cryptocurrency names(Btc, Eth, Sc etc) as a state call crypto. Using map function how can I set the element name dynamically ?

render(){
 return(
  <div>
   {this.state.crypto.map( crypto => {
    <h3>{crypto}</h3>
    <{crypto} />
   }
  </div>
 )
}

score 2 · Accepted Answer · answered Feb 14 '18 at 10:42

2

You can simply use variable as tag (the only requirement is that variable starts with uppercase letter):

render(){
    return(
        <div>
            {this.state.crypto.map(Crypto => (
                <div>
                    <h3>{crypto}</h3>
                    <Crypto />
                </div>
            ))}
        </div>
    )
}

answered Feb 14 '18 at 10:42

pwolaq

6,343
19
45

This gives me an error. `Objects are not valid as a React child (found: [object Crypto]). If you meant to render a collection of children, use an array instead. in h3 (at currency_main.js:44) in div (at currency_main.js:43) in div (at currency_main.js:41) in CryptoList (at App.js:10) in div (at App.js:9) in App (at index.js:8)` – Thidasa Pankaja Feb 14 '18 at 10:55
This will only work if the array contains a list of types (aka Components), and not strings of names. – omerts Feb 14 '18 at 10:55
@omerts in your case it will behave the same, there is no workaround other than passing functions – pwolaq Feb 14 '18 at 10:57
@pwolaq Correct, my bad :) – omerts Feb 14 '18 at 11:00
So, @pwolaq can't I use this if I'm using an array of strings ? – Thidasa Pankaja Feb 14 '18 at 11:08
@ThidasaParanavitharana no, you can't - React does not support such syntax because there is no guarantee your function/class names won't be scrambled when using some kind of optimizers. – pwolaq Feb 14 '18 at 11:09
@pwolaq Thanks a lot for the clarification. This worth more. Anyway solved the issue by using a separate library which shows the currency icons using CSS classes. – Thidasa Pankaja Feb 14 '18 at 11:12

omerts · Answer 2 · 2018-02-14T10:34:15.033

1

You can set the name dynamically using React.createElement function. JSX is just synthetic sugaring over the createElement function.

render() {    
 return (
  <div>
   {this.state.crypto.map(crypto => {
      const cryptoElement = React.createElement(crypto)
      return <div>
        <h3>{crypto}</h3>
        {cryptoElement}
      </div>
    })}
  </div>
 )
}

Fiddle: https://jsfiddle.net/omerts/Lagja2sy/

Here you can find the documentation about it: https://reactjs.org/docs/react-api.html#createelement

edited Feb 14 '18 at 10:34

answered Feb 14 '18 at 10:23

omerts

8,485
2
32
39

Hey, I checked in jsfiddle it works fine. But when I add it to my code it gives me an error saying `Warning: is using uppercase HTML. Always use lowercase HTML tags in React. Warning: The tag is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.` gives this error for all the array elements as they start in capital letters (as should the elements). Anyway, solved my issue by using a seperate library which use CSS classes. – Thidasa Pankaja Feb 14 '18 at 11:05
Ok, if you want to try to solve your above issue anyways, please post some more of your code. Preferably, post a fiddle. – omerts Feb 14 '18 at 14:52

How to set element name dynamically in ReactJS

2 Answers2

Linked