Home / Questions / 251741
Accepted
ricardo leiva sikic
Asked: 2020-04-05 12:36:36 +0800 CST 2020-04-05 12:36:36 +0800 CST

Composition of components

  • 772

I'm looking for a way that the declared function is called in the component several times (passing props to it), I'm doing it in app.jsbut it only shows the h1. Where should I start the function so that the component takes the values? inside of her?

function welcome(props) {
  return <h1>Hola, {props.name}</h1>
}


export function App() {
 return(
  <div>
   <h1>Hello 4to Componente</h1>
   <welcome name="Ricardo" />
   <welcome name="Paul" />
  </div>
 );
}

It's already rendering through index.jswith

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

2 Answers

  1. I'll help you a bit with your problem, for that first let's read the documentation , and it says something like this:

    Note: Always start component names with a capital letter.

    React treats components starting with lowercase letters as DOM tags. For example, represents an HTML div tag, but represents a component and requires Welcome to be in scope. To learn more about the reasoning behind this convention, please read JSX In Depth.

    Which translates to the following:

    Note: Component names must always start with a capital letter.

    React treats components that start with a lowercase letter as DOM tags. For example, renders an HTML div tag, but renders a component and requires Welcome to be in scope. To learn more about the reasons behind this convention, please read JSX In Depth.

    What does that mean? that you need to change the way you name your component, try this:

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


export function App() {
  return (
    <div>
      <h1>Hello 4to Componente</h1>
      <Welcome name="Ricardo" />
      <Welcome name="Paul" />
    </div>
  );
}

    Any questions comment, I will gladly help you

    • 3
  2. Best Answer

    In order for your function welcometo be considered a component, it must begin with a capital letter, as shown below:

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


function App() {
    return(
        <div>
            <h1>Hello 4to Componente</h1>
            
            <Welcome name="Ricardo" />
            <Welcome name="Paul" />
        </div>
    );
}


ReactDOM.render(<App />, document.getElementById('four'));
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>


<div id="four"></div>

    • 2