Grupo de React
Este grupo esta relacionado con nuestro curso profesional de React. Aquí se comparten temas... View more
organizador:
- Organizado por
-
No arroja la info de los h1 en el archivo profile.jsx
No arroja la info de los h1 en el archivo profile.jsx
Que tal en el modulo de componentes, functional components no me arroja en pantalla el mensaje del h1 en ninguna de las 3 formas…:(<div>
//Aqui el arhivo profile.jsx
import React from ‘react’;
/* const Profile =()=>{
return(
<h1>Soy un componente de funcion</h1>
)
} */
/*function Profile(){
return(
<h1>Soy un componente de funcion de es5</h1>
)
}*/
const Profile=()=>(
<h1>Hola soy mas sencillo</h1>
)
export default Profile;
//Aqui EL App.js
import logo from ‘./logo.svg’;
import ‘./App.css’;
import UserComponent from ‘./components/user’;
import Profile from ‘./components/user/profile’;
function App() {
return (
<div className=”App”>
<header className=”App-header”>
Hola Mundo desde React! 😀
Edgar Carmona
</header>
<UserComponent/>
</div>
);
}
export default App;
</div>
- 3 Respuestas
Parece que estás teniendo problemas para renderizar el componente
Profileen tu aplicación de React. A simple vista, el código parece estar bien. Sin embargo, me gustaría hacer un par de comprobaciones para ayudarte a solucionar este problema.1. Asegúrate de estar importando el componente
Profilecorrectamente enApp.js: Verifica que la ruta del archivo sea correcta y que estés importando el componente de la manera adecuada.2. Verifica si estás utilizando el componente
ProfileenApp.js: No veo que estés utilizando el componenteProfiledentro deAppen tu código. Necesitas añadir<Profile />dentro del return deApppara que se muestre en la interfaz.Intenta modificar
App.jsde la siguiente manera:import React from 'react';
import logo from './logo.svg';
import './App.css';
import UserComponent from './components/user';
import Profile from './components/user/profile';
function App() {
return (
<div className="App">
<header className="App-header">
{logo}
Hola Mundo desde React! Edgar Carmona
<Profile /> {/* Asegúrate de añadir esta línea */}
<UserComponent/>
</header>
</div>
);
}
export default App;
Luego de realizar estos cambios, ¿sigues teniendo problemas para ver el mensaje del
h1en pantalla?
excelente, gracias , si faltaba llamar <Profile /> en app.js 🙂
De nada, saludos 😀
Inicia sesión para responder.