2

Mi duda es la siguiente, estoy aprendiendo React y estoy en la parte de los componentes y pasando props a estos mismos, resulta que el primer ejemplo que realicé lo tengo de la siguiente forma.

    export function Props ({listItem, name = '- No pertenece a nadie -'}) {
    return <li>{listItem}, pertenece a {name}</li>

    <Props listItem="Testing 1" name="Bastian" />
    <Props listItem="Testing 2" name="Antonia" />
    <Props listItem="Testing 3" name="Rocio" />
    <Props listItem="Testing 4" />


}

Lo que comprendí es que, como primera parte estoy exportando mi componente hacía el archivo correspondiente de index.js. Lo que estoy haciendo es nombré una variable listItem y otra name, la cuál esta llamada name, si es que no se le pasa ningún parámetro adquirirá el valor por defecto de 'No pertenece a nadie'. Luego lo que hago es darle los valores a las variables listItem y name. Hasta acá ninguna duda y esto en el navegador se imprime bien.

Luego de eso creo un componente llamado InfoBancario para pasarle más parámetros (a forma de reforzar lo aprendido).

export function InfoBancario (props){
    return <div>
        <ul>
            <li>El dueño de la cuenta es {props.nombre}. El dinero que tiene es {props.montoDinero} USD. ¿Se encuentra habilitado para pedir un credito? {props.situacion ? 'Si' : 'No'}</li>
        </ul>
    </div>
}
<InfoBancario nombre="Bastian" montoDinero={3000} situacion={true} />

La duda que tengo es la siguiente. Resulta que al querer pasar los parámetros como lo hice con el primer componente este no me deja y no se impremen por pantalla, los quería pasar de esta forma:

export function InfoBancario (nombre, montoDinero, situacion){
    return <div>
        <ul>
            <li>El dueño de la cuenta es {nombre}. El dinero que tiene es {montoDinero} USD. ¿Se encuentra habilitado para pedir un credito? {situacion ? 'Si' : 'No'}</li>
        </ul>
    </div>
}

Al momento de querer realizarlo así, estos dejan de imprimirse por pantalla y la consola marca error, no así el código. Creo saber por qué es pero me gustaría saber si es que estoy en lo correcto o si me pudieran dar una mejor explicación. ¿Es por qué ya no estoy pasando solo Strings y estoy pasando booleanos y int, lo considera como si fuera un objeto?

1 respuesta 1

1

Mil disculpas, acabo de descubrir que si puedo pasarlos como yo quería sin necesidad de poner props, solo tenia que poner las llaves.

export function InfoBancario ({nombre, montoDinero, situacion}){
    return <div>
        <ul>
            <li>El dueño de la cuenta es {nombre}. El dinero que tiene es {montoDinero} USD. ¿Se encuentra habilitado para pedir un credito? {situacion ? 'Si' : 'No'}</li>
        </ul>
    </div>
}
2

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.