2

Estoy empezando a aprender react y recien me estoy metiendo a ese mundo y estuve intentando hacer algo bastante simple pero que no me sale, lo que quiero hacer es que se muestre en pantalla una bienvenida, pero quiero que los datos de esa bienvenida los tome de un archivo js

Mi js:

import React from "react";
import Bienvenido from "./App";

function Saludar(){
    return(
        <>
            <Bienvenido nombre = "lazaro" apellido = "france" localidad = "llavallol"/>
        </>
    )
};

export default Saludar

Mi jsx:

import React from "react"

const Bienvenido = ({nombre, apellido, localidad }) =>{
  return(
    <h1>
      Hola {nombre} {apellido} de {localidad}
    </h1>
  )
}

export default Bienvenido

Ese es mi código, el de la izquierda es el js y el de la derecha es el jsx. lo que no se es porque no me toma el jsx los valores del otro, porque unicamente me muestra por pantalla "hola de"

0

1 respuesta 1

0

Parece que esta relacionado con la forma que estas importando y utilizando el componente Bienvenido en tu archivo JSX. pararece que estas importanto el componente Bienvenido desde el archivo incorrecto. Tu archivo JSX, estás importando Bienvenido desde "./App", pero deberías importarlo desde el archivo donde esta definido y al parecer es el mismo archivo en el que estás escribiendo el componente saludar. JSX:

import React from "react";

const Bienvenido = ({ nombre, apellido, localidad }) => {
  return (
    <h1>
      Hola {nombre} {apellido} de {localidad}
    </h1>
  );
};

const Saludar = () => {
  return (
    <>
      <Bienvenido nombre="lazaro" apellido="france" localidad="llavallol" />
    </>
  );
};

export default Saludar;

Y también asegurate de que el archivo JSX y el archivo JS se encuentren en la misma ubicaicon y también que el nombre del JSX sea correcto al importar el componente Saludar en tu aplicación

7
  • yo tengo una carpeta src que es por default la que te da cuando creas react, y ahi adentro tengo "bienvenido.js" y "App.jsx", no estaria entendiendo muy bien lo que vos me estas diciendo de que son el mismo o algo asi Commented el 3 nov. 2023 a las 17:32
  • cuando mencioné que "Bienvenido.js" y "App.jsx" podrían ser el mismo archivo, me refería a la posibilidad de que ambos archivos contengan el mismo código o realicen las misma funcionalidad en tu aplicación. Por ejemplo, si tanto "bienvenido.js" como "App.jsx" tienen el código para mostrar un mensaje de bienvenida en tu aplicación, entonces podrían considerarse como el mismo en términos de funcionalidad.
    – NetoXD99
    Commented el 3 nov. 2023 a las 18:35
  • okey ahi entendi a lo que te referias, pero en el caso que quiera mantenerlos separados, como podria hacer, porque quiero saber porque es que no funciona en dos pestañas distintas Commented el 3 nov. 2023 a las 18:52
  • Si quieres mantener los archivos "bienvenido.js" y "App.jsx" separados y estás tienes problemas al ejecutar tu aplicación en dos pestañas distintas, puede que estés enfrentando un problema relacionado con el estado compartido entre las pestañas. Cuando abres tu aplicación en dos pestañas diferentes, cada pestaña tiene su propia instancia del navegador y, por lo tanto, su propio entorno de ejecución. Para solucionar este problema, puedes considerar utilizar una solución de gestión de estado como Redux o Context API de React.
    – NetoXD99
    Commented el 3 nov. 2023 a las 18:57
  • no estoy usando dos pestañas del navegar, estoy usando dos pestañas distintas dentro del vsc, pero la de "bienvenido.js" no termina vinculandose bien con la otra creo yo Commented el 3 nov. 2023 a las 19:00

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.