CODEWITHSUNDEEP
reactjs
isam
isam

Reputation: 45

XJS value should be either an expression or a quoted XJS text

I am very new to programming, and started doing exercises I found

I have been trying to build this exercise, but no I keep getting this error, help?

Uncaught Error: Parse Error: Line 16: XJS value should be either an expression or a quoted XJS text(…)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<!-- DOCTYPE HTML -->
<html>
<head>
<title>Your First React Project</title>
</head>
<body>
<div id="content"></div>
<script src="https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-xfp1/t39.3284-6/12512166_196876483993243_981414082_n.js"></script>
<script src="https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-xfa1/t39.3284-6/12512184_1664789273772979_614489084_n.js"></script>
<script src="http://dragon.ak.fbcdn.net/hphotos-ak-xfp1/t39.3284-6/10734305_1719965068228170_722481775_n.js"></script>
<script type="text/jsx">
/*Add your React code here*/


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>
    );
  }
});

var Profile = React.createClass({
  render: function(){
    return(
      <div>
      <h3> {this.props.name} </h3>
      <img src={this.source.imgURL} />

      </div>
    );
  }
});

var Hobbies = React.createClass({
  render: function(){
    var hobbies = this.props.hobbyList.map(function(hobby,index) {

      return (
        <div>
          <h5>My Hobbies:</h5>
          <ul>{hobbies}</ul>
        </div>
      )
    }
  );

  }
});


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


</script>
</body>
</html>

Upvotes: 2

Views: 1486

Answers (1)

Fabian Schultz
Fabian Schultz

Reputation: 18556

Okay, a couple of things:

  1. You forgot the curly brackets around some props. So instead of <Profile name=this.props.profileData.name />, you want <Profile name={this.props.profileData.name} />. That was causing the error you've mentioned in the headline of this question.

  2. Not sure why you've used this.source in the Profile component. That returns undefined. Instead, use the prop that you've already passed along (this.props.imgURL).

  3. In the Hobbies component your iteration isn't 100% working. Try to only iterate the <li> elements (your hobbies) and then put them in the ul tag below.

I've fixed these parts of your code and hope that that will help. It's only small things, nothing major. Have fun!

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>
    );
  }
});

var Profile = React.createClass({
  render: function(){
    return(
      <div>
      <h3>{this.props.name}</h3>
      <img src={this.props.imgURL} />
      </div>
    );
  }
});

var Hobbies = React.createClass({
  render: function(){
    var hobbies = this.props.hobbyList.map(function(hobby, index) {
      return <li>{hobby}</li>;
    });
    return (
      <div>
      <h5>My Hobbies:</h5>
      <ul>{hobbies}</ul>
      </div>
    );
  }
});


ReactDOM.render(<App profileData={DATA}/>, document.getElementById('content'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.min.js"></script>

<div id="content"></div>

Upvotes: 1

Related Questions