Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

173
Vistas
Showing Strings which are there to completing the props

i have tried to render some element using props But it is showing Strings which are there to completing the props.

function Welcome(props){
const element = <p>
<h3>Hello {props.name}</h3>
<h3>My car Brand is {props.brand}</h3>
</p>
return element

}



function Greet() {
    const brand = "Ford";
    const welcome = <div>
        <Welcome name="World" />
        <Welcome brand={brand} />
    </div>
    return welcome;
}

Output is coming like this..

Hello World!! My car Brand is
Hello !!
My car Brand is Ford

but i wanted it as

Hello World!!
My car Brand is Ford
about 4 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

don't need to sent brand explicitly in another function you can do it like this:

function Greet() {
    const brand = "Ford";
    const welcome = <div>
        <Welcome name="World" brand={brand}/>
    </div>
    return welcome;
}

and you can also return jsx directly

function Welcome(props) {
  return (
    <p>
      <h3>Hello {props.name}</h3>
      <h3>My car Brand is {props.brand}</h3>
    </p>
  );
}

function Greet() {
  const brand = 'Ford';
  return (
    <div>
      <Welcome name='World' />
      <Welcome brand={brand} />
    </div>
  );
}

that the actual way of doing it

about 4 years ago · Juan Pablo Isaza Denunciar

0

You're getting that output because you're calling your "Welcome" component twice, once with the "name" property and once with the brand property, so the first render is: 'Hello world!! My car Brand is [undefined because you didn't send the brand property] ' and the second rendering is : 'Hello!! [undefined because you didn't send the name property] My car Brand is Ford',undefined values are represented as blank spaces, to get the output you expect you should only call your "Welcome" component once with both properties like this:

<Welcome name={"World "} brand={brand}/>

I hope it helped you, and it's better to send JSX directly.

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda