CODEWITHSUNDEEP
javascriptnode.jsreactjs
AAaaAA
AAaaAA

Reputation: 85

what's the syntax of the new react version

guys, I want to print some components on the App.js form the index.js

but I keep getting the module isn't found an error, and I noticed my syntax is outdated, can anyone pls tell me how to do it in the newer version, here is this code and what do we write on the App.js to print them? 

    var DATA = {    
    name: 'John Smith',
    imgURL: 'http://lorempixel.com/100/100/',
    hobbyList: ['coding', 'writing', 'skiing']
}
var App = React.createClass({
    render: function(){
        return (
            <div>
                <Profile 
                    name={this.props.profileData.name} 
                    imgURL={this.props.profileData.imgURL}/>
                <Hobbies
                    hobbyList={this.props.profileData.hobbyList} />
            </div>
        );
    }
});

Upvotes: 0

Views: 119

Answers (1)

Josh Birdwell
Josh Birdwell

Reputation: 745

You will need to import the profile and hobbies components as well once you build those. 

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

const DATA = {    
    name: 'John Smith',
    imgURL: 'http://lorempixel.com/100/100/',
    hobbyList: ['coding', 'writing', 'skiing']
}
class App extends Component {
    render() {
        const { profileData: { name, imgURL, hobbyList } } = this.props;
        return (
            <div>
                <Profile 
                    name={name} 
                    imgURL={imgURL}/>
                <Hobbies
                    hobbyList={hobbyList} />
            </div>
        );
    }
}

ReactDOM.render(<App profileData={DATA} />, document.getElementById('root'));

Upvotes: 1

Related Questions