Create a Simple Reusable React Component

Hi,

I see an arrow function with no arguments for props in the transcript. Please change it

from

const message = () => <div>{props.msg}</div>

to

const message = props => <div>{props.msg}</div>

Thanks ahairshi!

@Kent; how do you move/get/run the babel compiler to compile/display the message at the 3.0 marker in your video?

Thank you and happy holidays...

See: https://babeljs.io/repl/

:)

Thanks for your quick response; I did just that and came back to see ur answer.... my bad... thanks again,, enjoying the course a great deal, second time around...

:)

@Kent, I am trying to play with the code further - trying to pass a prop as className. Any reason why the code below doesn't work?

  const Message = props => <div {props.className}>{props.children}</div>
  const element = (
    <div className="container">
      <Message>Hello World
        <Message>Next!</Message>
      </Message>
    </div>
  )

Hey Kingsley,

Your syntax is incorrect. Also, you need to pass the prop to the Message component. Try this:

  const Message = props => <div className={props.className}>{props.children}</div>
  const element = (
    <div className="container">
      <Message className="first-message">Hello World
        <Message className="second-message">Next!</Message>
      </Message>
    </div>
  )

I hope that helps. Good luck!

I tried this

var Message = function Message(props) {
  return React.createElement(
    "div",
    null,
    props.children,
    props.className
  );
};
var element = React.createElement(
  "div",
  { className: "container" },
  React.createElement(
    Message,
    null,
    "Hello World",
    { className: "test" },
    React.createElement(
      Message,
      null,
      "Next!"
    )
  )
);

That gave this error;

Uncaught Error: Objects are not valid as a React child (found: object with keys {className}). If you meant to render a collection of children, use an array instead.

I am trying to see if it's possible to pass a className to either of the divs via props.

Okay, I get it now. They are components, thus it is impossible to give them a className. Right?

Well, as you can see in my example, I'm passing the prop called className to the component, and it uses that prop to forward it into the underlying div.

Hey Kent,

I have identified two issues in the transcript:

• 1. <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script> (src instead of type)
• 2. the rootElement is not defined

Thanks for the course!

Thanks Fortech! I'll let the egghead folks know.

Maybe it's just me, but I've tried using these tutorials three times and it seems too fast-paced.

Hi Kent greate course. I notice the code is sandbox there is a folder src with index.js inside, and in the index.js it somehow use parcel.js I wonder when this index.js is called and what it does ?

Coming from VB programming, I find myself struggling with the idea that props don't have to be defined in the receiving component. Anything we pass to it just becomes a prop. I kinda get it but it still keeps tripping me up when trying to understand existing code.

I was surprised that we can assign html to a variable with no enclosures, such as quotes.

const greeting = (props) => <div> { props.msg } </div>

Can you help us understand all the different syntax supported by arrow functions? I keep getting lost when I see some with parenths, some without, some with empty parenths. Some with curly braces, some without, etc. I can look up the supported syntax, but I can't figure out when I should (or must) use one over another?

So, does capitalizing a function like that (Message) essentially make it a component variable (that is, a variable that holds a component)?

Is there a guideline or rule to help us know when to use name=value vs name: value? I find it very confusing.

<Welcome msg= "Welcome to our site" />

And I guess, the reason the above didn't require {} is because Welcome is defined as a component variable?