Functions of React Components

Question

I would like to understand the React code below; Specifically, I am assuming that the is rendering component of this but the "Welcome" in the snippet above refers to the "Welcome" function at the top and that the rendinring runs the function through 3 iterations, one for each name??

...

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

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

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

Chase DeAnda · Accepted Answer · 2017-10-24 19:14:09Z

1

This is an example of Composing Components.

Components can refer to other components in their output.

This means that we can nest multiple components inside of a component. This is usually referred to as Parent/Child Components. A Parent Component can render many Child Components.

In the example you posted, they have created a functional stateless component called <Welcome />. The <App /> component is the Parent Component and it needs to render the <Welcome /> component three times, each with different data. They are using props to pass in a different name to each <Welcome /> component.

When the <App /> components render method is called, it will render the <Welcome /> component three separate times, each with their own props.

answered Oct 24, 2017 at 19:14

Chase DeAnda

16.5k3 gold badges34 silver badges41 bronze badges

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

Collectives™ on Stack Overflow

Functions of React Components

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