2.Use a Variable Attribute in a Component step 4


#1


https://www.codecademy.com/en/courses/react-101/lessons/react-components-advanced-jsx/exercises/component-variable-attribute?action=lesson_resume&link_content_target=interstitial_lesson


4.
On your new line, add an img element.
Your should have two attributes:
an src of owl.src
an alt of owl.title

For some reason, my answer isn't accepted, even though I have compared it with the RedPanda.js example and don't see any differences.


 Component class starts here:
var Owl = React.createClass({
  render: function(){
    return(
    <div>
         <h1>{owl.title}</h1>
          <img   
          src={owl.src} 
          alt={owl.title} /> 
      </div>
      );
  }
});


#2

Go ahead and complete the last step and Run. It might rectify itself.

ReactDOM.render(
  <Owl />,
  document.getElementById('app')
);

#3

I did in my original attempt, makes no difference...


#4

Do you have this in your code, above the component?

var owl = {
  title: "Excellent Owl",
  src: "./owl.jpg"
};

#5

The code I have had
src: "https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-owl.jpg"

I tried it with "./owl.jpg", still failing

Here is my full code, should've included it in my first post

var React = require('react');
var ReactDOM = require('react-dom');

var owl = {
  title: "Excellent Owl",
  src: "https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-owl.jpg" 
};

// Component class starts here:
var Owl = React.createClass({
  render: function(){
    return(
    <div>
         <h1>{owl.title}</h1>
          <img   
          src={owl.src} 
          alt={owl.title} /> 
      </div>
      );
  }
});

ReactDOM.render(<Owl />, document.getElementById('app');

#6

Is the image rendering in the localhost browser?


#7

Yup, the image url itself renders fine.


#8

I have the same problem javarockstar, apparently nobody answer to your questions ! Codecademy is so cool for that ! I have the same code, i think it's the right ... If somebody can elp us


#9

I asked if it is rendering because there is a missing ) in the above line.


#11

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.