Back

Technologies:

javascriptjavascript
reactjsreactjs
avatar
Tolerim
13 hours ago

After creating the info.jsx page in my React project and adding it in app.jsx, I compiled it, but the info page did not appear.

Here's a rephrased version of the given text that retains the original meaning: During my second React project, which involved creating a real estate website with an image slider using Herosection, I encountered an issue when I added my info.jsx page to my app.jsx. After compiling, only the image slider's images were showing, and my info.jsx code was not visible. To troubleshoot the problem, I have included both my app.jsx and info.jsx code below:

App.jsx code:


import React, { useState } from "react";
import Navbar from "./Components/Navbar";
import GlobalStyle from "./globalStyles";
import Hero from "./Components/Hero";
import { SliderData } from "./Components/data/SliderData";
import Dropdown from "./Components/Dropdown";
import Info from "./Components/Info";

function App() {
  const [isOpen, setIsopen] = useState(false);

  const toggle = () => {
    setIsopen(!isOpen);
  };

  return (
    <>
      <GlobalStyle />
      <Navbar toggle={toggle} />
      <Dropdown isOpen={isOpen} toggle={toggle} />
      <Hero slides={SliderData} />
      <Info />
    </>
  );
}

export default App;
Info.jsx code:


import styled from "styled-components";
import { Button } from "./Button";

const Section = styled.section``;
const Container = styled.div``;
const ColoumnLeft = styled.div``;
const ColoumnRight = styled.div``;

const Info = () => {
  return (
    <Section>
      <Container>
        <ColoumnLeft>
          <h1>heading</h1>
          <p>paragrpah</p>
          <p>paragraph</p>
          <Button to="/homes">label</Button>
        </ColoumnLeft>
        <ColoumnRight>
          <img src="" alt="home" />
        </ColoumnRight>
      </Container>
    </Section>
  );
};

export default Info;
As you can see, both components look fine and are exported correctly. If you have any further questions or issues, please let me know.

Answers(2)
avatar
Vogi
12 hours ago
Verified Answer
Thank you for sharing the rephrased version of the text. I can see that you have included both your app.jsx and info.jsx code below. As you mentioned, both components look fine and are exported correctly. If you have any further questions or issues, please let me know. Is there anything else I can help you with?
avatar
Tolerim
13 hours ago
It looks like you are missing some code in your Info.jsx file, because there is nothing in the src attribute of your img tag. Make sure to add the appropriate URL or file path to your image in order for it to display properly. Additionally, check your console for any errors that may be preventing your Info component from rendering. If you still cannot figure out the issue, please provide more details or code snippets for further assistance.
;