How To Set Element Name Dynamically In Reactjs

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 and so

Solution 1:

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>
    )
}

Solution 2:

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