How to render a component using variable or props?

Question

The class receives the props.name which is the name from another Component, but it not renders properly.

class Component extends React.Component{
  constructor(props){
    super(props);
  }

  render(){
    var Element = this.props.name;
    return (  
        <Element />
    )
  }
}

const Dropdown = () =>{
    return(
    <div>
       <select>
          <option value="initial" selected>Select...</option>
          <option value="grapefruit">Grapefruit</option>
          <option value="lime">Lime</option>
          <option value="coconut">Coconut</option>
        </select>
    </div>
  )
}

class App extends React.Component {
  state = {
    components: []
  };

  render() {
    return (
      <div>
        <Component components={this.state.components} name="Dropdown" />          
      </div>
    );
  }
}

ReactDOM.render(<App />, mountNode);

The component renders fine when I write manually the name of the Component. For example:

render(){
  var Element = this.props.name;
  return (  
       <Dropdown />
  )
}

instead of passing the string, try this: name={Dropdown} and use the same code. — Mayank Shukla
– Mayank Shukla, Commented Jul 11, 2017 at 18:48
@MayankShukla it was! If you wish post it to vote as solution. — Angel Cuenca
– Angel Cuenca, Commented Jul 11, 2017 at 18:56

Tomasz Mularczyk · Accepted Answer · 2017-07-11 19:00:34Z

1

How do you expect to generate Component out of string???

Do this:

class App extends React.Component {
  state = {
    components: []
  };

  render() {
    return (
      <div>
        <Component components={this.state.components} name={Dropdown} />          
      </div>
    );
  }
}

answered Jul 11, 2017 at 19:00

Tomasz Mularczyk

36.4k19 gold badges118 silver badges176 bronze badges

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

Comments

abdul · Accepted Answer · 2017-07-11 18:54:23Z

0

You need to pass the props as tag argument. ex: . see the below example.

class parent extends React.Component{
constructor(){
super();
this.state={
   name:'ABC',
 }
}
render(){
   return(
  <Child argument={this.state.name} />
  )
 }
}

//stateless component don't have state
 function Child(props){
 return <div>{this.props.arguments}</div>
}

answered Jul 11, 2017 at 18:54

abdul

3606 silver badges19 bronze badges

Comments

Lucaci Sergiu · Accepted Answer · 2017-07-11 19:54:08Z

In the render() method you have to return one React element. That React element has to be a representation of DOM element. In your case you're trying to render a string, and that's the reason why isn't rendered (as you said) 'properly'. See documentation of render() method here.

I've updated your code so the name component is successfully rendered:

class Component extends React.Component{
  constructor(props){
    super(props);
  }

  render(){
    var Element = this.props.name;
    return (
    <div>
      {Element}
    </div>
    )
  }
}

const Dropdown = () =>{
    return(
    <div>
       <select>
          <option value="initial" selected>Select...</option>
          <option value="grapefruit">Grapefruit</option>
          <option value="lime">Lime</option>
          <option value="coconut">Coconut</option>
        </select>
    </div>
  )
}

class App extends React.Component {
  state = {
    components: []
  };

  render() {
    return (
      <div>
        <Component 
        components={this.state.components}       
        name={<div>Dropdown</div>}/>          
      </div>
    );
  }
}


React.render(<App/> , document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.min.js"></script>
<div id="app"></div>

Mayank Shukla · Accepted Answer · 2017-07-12 03:16:08Z

0

Instead of passing the string from parent component, pass it like this:

<Component components={this.state.components} name={Dropdown} />

I think reason is:

<Element> will get converted into React.createElement(Element, {}) and which expect the first argument as a react component name, or a string (HTML tag), since you want to render a react component so don't pass the name as string.

edited Jul 12, 2017 at 3:16

answered Jul 11, 2017 at 19:38

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

Collectives™ on Stack Overflow

How to render a component using variable or props?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related