Jsx2 exercise discussion

React Web Development Course
#164 
React.createElement(“div”, {
     id: “hello”
  }, React.createElement( “p”, null, “Lorem, ipsum.”)
);
1 Like
#165

Without looking at answers:

React.createElement( "div", {

    "id": "hello"

}, "Lorem, ipsum");
1 Like
#166 
<div id="hello">
<p> lorem,ipsum </p>
</div>


React.createEelement("div", {
    id: "hello"},
React.createEelement(
        "p", null, "lorem,ipsum"));
1 Like
#167

React.createElement(“div”,
{id: “hello”},
React.createElement(“p”, null, “Lorem, ipsum.”)
);

But I get error in browser I think and only get this displayed:
React.createElement(“div”, {id: “hello”}, React.createElement(“p”, null, “Lorem, ipsum.”) );

#168

Full code that I have used and done the layout like yours but still getting the same int the browser…

Code

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

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

Browser output
Lorem, ipsum.

React.createElement( ‘div’, { id: ‘hello’ }, React.createElement( ‘p’, null, ‘Lorem, ipsum.’ ) );

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

Could you show me the browser console screenshot to see what type of error it is? I’m not sure what sort of error it is. :thinking:

Thanks

#171

@theaussie86, your code give the same result

#172

Screenshot 2021-09-28 at 12.56.51

Hi @Malik, please seee screenshot of code, browser and console, thanks

1 Like
#173

My code for the exercise is below;

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

Thanks, I will try that now… disappointed about the level of help :frowning:

#175

@Zaqoy

So that code works for you in chrome browser?

I copied and pasted that and in my browser it is just printing everything to the screen, the whole line of code?!?!?!

#176

Hey @thenode369, hope you are well.

Sorry for the delay in the answer, but based on this image, you have just code an html file with the react syntax right? but you have not set your project folder with the modules need it to run properly that kind of react syntax.

Could you please share an image of your project folder?

Carlos Z

1 Like
#177

Thanks Carlos

This is the doc file code, yes in a html file

Screenshot 2021-10-12 at 18.45.13

And this is the first module code that works fine…

Screenshot 2021-10-12 at 18.47.30

Scratching my head :thinking:

1 Like
#178

I think you forget to encapsulate the react code in a script tag

<script type="text/babel">
... Code here
</script>

Carlos Z

1 Like
#179

THanks Carlos, I will try that and also I will rewatch the videos as I am sure i copied it line for line as I dont normally nest that way

#180

React.CreateElement(
“div”,
{ id: “hello” },
React.CreateElement(
“p”,
null,
“Lorem, ipsum.”
)
);

element “p” is an inner element in the “div” element

#181

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

#182 
<div id="root"><p>Lorem, ipsum.</p></div>

<p>Lorem, ipsum.</p>

React.createElement( 
    'div' ,
    {
        id 'hello' ,
        
    },
    React.createElement(
        'P',
        'null',
        'Lorem, ipsum.'
    )
);
ReactDOM.render(
  <HelloMessage name="YonTracks" />,
  document.getElementById('root')
);
#183

Answer:

"use strict";

/*#__PURE__*/
React.createElement("div", {
  id: "hello"
}, /*#__PURE__*/React.createElement("p", null, "Lorem, ipsum."));