CODEWITHSUNDEEP
javascriptreactjs
slickrick
slickrick

Reputation: 11

Rendering component based on state/prop in React?

I've been learning React and I was wondering how would I be able to render classes/components based on the state?

I was thinking perhaps putting something like: 

var currentState = this.state.title;
< currentState />

but that doesn't seem to work.

I can do it using if statements or case/switch but that doesn't seem to be particularly flexible.

Here is what I'm working with currently: 

var Proj1 = React.createClass({
    render: function(){
        return (
            <h1>Number one</h1>
        )   
    }
});

var Proj2 = React.createClass({
    render: function(){
        return (
            <h1>Number two</h1>
        )   
    }
});

var ContentContainer = React.createClass({
    getInitialState: function(){
        return {
            title: 'Proj1'
        }
    },
    render: function(){
        return (
            ///// Proj1?
        )
    }
});

React.render(
    <ContentContainer/>, document.getElementById('container')
 );

Essentially I'd like to render the appropriate class based on the current name of the state. For example if the state.title = Proj1, i'd like to render Proj1, alternatively if the state.title = Proj2, i'd like to render Proj2.

Please and thanks

Upvotes: 1

Views: 2895

Answers (2)

Natural Lam
Natural Lam

Reputation: 742

I want to add a comment on top of Tyler McGinnis but unfortunately I don't have enough reputation to do that :). I think the edited answer 'worked' but still we need a map between title and the class. A way to do is to store these React Classes to an accessible object, like

Components = {};
Components.Proj1 = React.createClass({...}};
Components.Proj2 = React.createClass({...}};
...
ContentContainer = React.createClass({
    return (
        var Proj = Components[this.state.title];
        <Proj/>
});

I think that's still a bit hack-ish, and I don't have a better answer.

I think most of the time, React component states are used to control certain html/css properties, your use case is more like using object factory to create/get different type of objects, in which using if statement doesn't seem to bad.

Upvotes: 1

Tyler McGinnis
Tyler McGinnis

Reputation: 35276

There are multiple ways you can do this. All basically are just if statements though. I'd probably go with something like this and use a ternary operator, that's usually the most common practice.

var ContentContainer = React.createClass({
    getInitialState: function(){
        return {
            title: 'Proj1'
        }
    },
    render: function(){
        return this.state.title === 'Proj1' ? <Proj1 /> : </Proj2>;
    }
});

edit: I think you're wanting to know how to set components to variables. In this example, 

var currentState = this.state.title;
< currentState />

if we assume this.state.title was a component (which it's not), then you would just need to capitalize currentState.

For example. 

getInitialState(){
  return {
    proj1: Proj1 //Proj1 is a React Component.
  }
}
render(){
  var Proj1 = this.state.proj1; //you just need to capitalize the variable name.
  return <Proj1 />
}

Upvotes: 0

Related Questions