CODEWITHSUNDEEP
reactjsdynamically-generated
JustAnotherDev
JustAnotherDev

Reputation: 475

Generating Tags of existing components doesn't work in ReactJS

UPDATE

The number of the child comes from the parent, so i can't just load this in, this because i have a lot of components and i don't want import them all.

code has changed in the original post

ORIGINAL POST

I have a lot of components. I want dynamically generate the tags of some child components in a parent component. I looked for this and saw that this should work. But for some reason it doesn't..

codepen: https://codepen.io/anon/pen/qXPReP?editors=0010

class Child1 extends React.Component{
  render() {
    return (
      <div>I'm Child1</div>
    )
  }
};

class Child2 extends React.Component{
  render() {
    return (
      <div>I'm Child2</div>
    )
  }
};

class Child3 extends React.Component{
  render() {
    return (
      <div>I'm Child3</div>
    )
  }
};

class Parent extends React.Component{
  render() {
    var LinkedTag = "Child" + this.props.childIdThatHasToBeRendered;
    return (
      <div>
        <div>i'm the parent</div>
        <LinkedTag />
      </div>
    )
  }
};

class Main extends React.Component{
  render() {
    return (
      <Parent childIdThatHasToBeRendered={3} />
    )
  }
};

ReactDOM.render(<Main />, document.body);

is this even possible to do it like this?

Upvotes: 1

Views: 38

Answers (4)

Anas Tawfeek
Anas Tawfeek

Reputation: 109

In addition to @Dimitar Christoff, If you are using webpack code-splitting you can import those components dynamically so you don't have to include them all in your bundle for performance reasons.

Example:

// childComponent is the name of the component you want to import
const Render = require(`./${childComponent}.jsx`);
return (
// We add ".default" because its importing using the (require) function.
  <Render.default />
);

Upvotes: 0

Dimitar Christoff
Dimitar Christoff

Reputation: 26165

You need to dynamically pick a component to render... You just need a host object to pick from

eg TagRenderers.js:

import Child1 from './child1'
import Child2 from './child2'

export default {
  Child1,
  Child2
}

... later

import TagRenderers from '../TagRenderers'

...
render(){
  const TagRenderer = TagRenderers[`Child${this.state.number}`]
  return <div>
    <TagRenderer />
  </div>
}

https://codepen.io/anon/pen/GvMWya?editors=0010

it's basically picking a property off an object - it will differ if you need to require the component just in time - this assumes they are all available in memory

Upvotes: 1

Piyush Dhamecha
Piyush Dhamecha

Reputation: 1515

You can show Child component based on condition like

class Parent extends React.Component{
  render() {
    let component = <Child3/> // Here you can add the code for condition.
    return (
      <div>
        <div>i'm the parent</div>
        {component}
      </div>
    )
  }
};

Upvotes: 0

hairmot
hairmot

Reputation: 2975

Just remove your quotes

var LinkedTag = Child3;

Child3 is an object, not a string

updated codepen

Upvotes: 0

Related Questions