Jsx2 exercise discussion

It is a function in a function:

React.createElement (
   "div", 
   { id: "hello" }, 
   React.createElement ( 
      "p", 
      null, 
      "Lorem, ipsum."
   )
);
1 Like

I pasted exactly your code here: https://codepen.io/zsolt555/pen/RwREBYz?editors=1010. It is working. Possibly the setup is wrong, you should use the methods in the course to write React code (e.g. codesandbox.io or create-react-app).

One piece of evidence that there may be a small change w.r.t. my implementation: you used parentheses around this.props.name, ticker, and price. You should use braces instead. In the codepen, try changing ( to {, and ) to } respectively. Then you’ll see the proper values printed on screen. Every character counts, and a lot of practice is needed to level up at noticing these little details.

Details, like… Bitcoin price has a dollar, while Polkadot doesn’t. I look at the code and see it instantly because of years of experience. You’ll get there too if you don’t assume that you did everything exactly like in the video. Assumptions lead to overlooking these little details.

1 Like

React.createElement(“div”, { id: “hello”},

React.createElement(“p”, null, “Lorem, ipsum.”));

1 Like

React.createElement(“div”, {id: “hello”},
React.createElement(“p”, null, " lorem, ipsom "));

<div id="hello">
<p>Lorem, ipsum</p></div>

React.createElement("div",
{
    id:"hello"
};
React.createElement("p",
null,
"Lorem,Ipsum"
)
);

type or paste code here
1 Like
React.createElement(
     'div', 
     { 
     id: 'hello'
     },

     React.createElement(
          'p', 
          null, 
          'Lorem, ipsum.'
     )
);
1 Like
React.createElement(
        "div", {id: "hello"},
        React.createElement(
            "p", null, "Lorem, ipsum."
        )
);
1 Like

image

1 Like
React.createElement("div", {id: "hello"},
    React.createElement("p", null, "Lorem, ipsum.")
);
1 Like
React.createElement('div', {id:'hello'},
        React.createElement('p','Lorem, ipsum dolor'));

I have a question - is the property of null needed in the nested call? If so, why? I see others have used it.
Thanks!

1 Like
React.createElement("div",{id:"hello"},
React.createElement("p",null,"Lorem,ipsum.")                   
);
1 Like

I now have the answer to my question.

1 Like
ReactDOM.render(
  React.createElement(
    'div', {
    id: 'message'
    },
    React.createElement('p', null, 'Lorem ipsum.')
  ),
      document.getElementById('root')
);
2 Likes
React.createElement("div", {
  id: "hello"
},  React.createElement("p", null, "Lorem, ipsum."));
2 Likes
/*#__PURE__*/
React.createElement("div", {
  id: "hello"
}, /*#__PURE__*/React.createElement("p", null, "Lorem, ipsum."));
2 Likes

React.createElement(div,

                {id: Hello},

                React.createElement(p,, null,

                                "Lorem, ipsum"

                                )

                );
1 Like
React.createElement(
"div",
  {
  id: "hello"
},
  React.createElement(
    "p",
    null,
    "Lorem, ipsum."
  )
);
1 Like

We need to nest React element creation:

React.createElement("div", {
        id: "hello"
      }, 
React.createElement("p", null, "Lorem, ipsum.")
);
1 Like

React.createElement(“div”, {id: “hello”},

React.createElement(“p”, null, “Lorem, ipsum.”));

1 Like

I watched the jsx and jsx2 instructional videos more than once to see if I could obtain a better understanding of what was required of me in the exercise. My results are shown in the image below. I wrote my code directly in BabelJS so that I could easily correct whatever mistakes I made. Thanks!

1 Like