CODEWITHSUNDEEP
reactjs
Mr.Pandya
Mr.Pandya

Reputation: 2038

Multiple components in react

Iam new to react .

var Ad=React.createClass({
    render:function(){
        return(<b>{this.props.name}</b>)
    }
})
var Az=React.createClass({
    render:function(){
        return(<b>{this.props.class}</b>)
    }
})
var Aa=React.createClass({
    render:function(){
        return(<div>
            <Ad name={this.props.name}/>
            <Az name={this.props.class}/>
            </div>)
    }
})
ReactDOM.render(<Aa name="vijay" class="Asd"/>,document.body)

But it is showing only vijay not Asd why? Did react support it to pass two props.

Upvotes: 0

Views: 564

Answers (2)

Diablo3093
Diablo3093

Reputation: 1063

You should never render a component to the body directly. It is a bad practice. Here's why link

Upvotes: 0

krivtom
krivtom

Reputation: 24916

Your component Az is expecting property called class:

return(<b>{this.props.class}</b>)

But in your code you are providing only property name:

<Az name={this.props.class}/>

You should change it to be class in order to work.

However, there is another issue. class is a reserved keyword in React, so you should change class to something else in your code, for example myclass:

// 'class' was changed to 'myclass' in the code below
var Az=React.createClass({
    render:function(){
        return(<b>{this.props.myclass}</b>)
    }
})
var Aa=React.createClass({
    render:function(){
        return(<div>
            <Ad name={this.props.name}/>
            <Az myclass={this.props.myclass}/>
            </div>)
    }
})
ReactDOM.render(<Aa name="vijay" myclass="Asd"/>,document.body)

Upvotes: 2

Related Questions