React component simple render

Question

I am new to react and following a tutorial https://facebook.github.io/react/docs/components-and-props.html

I have the code below. I don't understand why won't it render the contents.

function Welcome(props) {
  return <h1>Hello, {props.surname}</h1>;
}

function App(props) {
  return (
    <div>
      <Welcome surname = {props.surname} />
      <Welcome surname = {props.surname} />
      <Welcome surname = {props.surname} />
    </div>
  );
}

function myApp(){
  return (
    <div>
      <App surname = "Simon" />
    </div>
  );
}

ReactDOM.render(
  <myApp/>,
  document.getElementById('root')
);

I am following the similar example this one: https://codepen.io/gaearon/pen/KgQKPr?editors=0010

The only thing I did different was to add a different component on top and changed the props data.

Please let me know if I am missing on anything.

Prakash Sharma · Accepted Answer · 2017-09-21 20:20:05Z

3

The first letter of react component should be capital. So convert your myApp to MyApp

function MyApp(){
  return (
    <div>
      <App surname = "Simon" />
    </div>
  );
}

ReactDOM.render(
  <MyApp/>,
  document.getElementById('root')
);

answered Sep 21, 2017 at 20:20

Prakash Sharma

16.7k6 gold badges35 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React component simple render

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related