Why can't I import a React component from a file? - javascript

I think I have written all the code right, but on the port I can only display app.js file
import React from 'react';
import ImgSlider from './ImgSlider';
import './App.css';
function App() {
return (
<div className="App" >
<div className="book-box">
<img src="" alt=""/>
<div>
<h1>Harry Potter</h1>
</div>
</div>
</div>
);
}
export default App;
and I want to import div element from ImgSlider
import React from 'react';
function ImgSlider() {
return (
<div>
<h3>Heading</h3>
<p>Description</p>
<img src="" alt=""/>
</div>
);
}
export default ImgSlider;
When i open browser it only shows HARRY POTTER from the App.js, I think it should also display div from the ImgSlider
Console massage Line 3:8: 'ImgSlider' is defined but never used no-unused-vars
Thanks for the attention


You arent rendering ImgSlider, just need to do this in App.js:
function App() {
return (
<div className="App" >
<div className="book-box">
<img src="" alt=""/>
<div>
<h1>Harry Potter</h1>
/* ADD this code*/
<ImgSlider />
</div>
</div>
</div>
);
}
This is just an example, you can add the <ImgSlider/> wherever you want.


To render some content from imported component you have to render it like:
return (
<div className="App" >
<div className="book-box">
<img src="" alt=""/>
<div>
<h1>Harry Potter</h1>
{/*Place it where you want to show it */}
<ImgSlider />
</div>
</div>
</div>
);
}


Simply add <ImgSlider /> into App
Your final code would look like this:
import React from 'react';
import ImgSlider from './ImgSlider';
import './App.css';
function App() {
return (
<div className="App" >
<div className="book-box">
<img src="" alt=""/>
<div>
<h1>Harry Potter</h1>
<ImgSlider />
</div>
</div>
</div>
);
}
export default App;

Related

How to fix this index.tsx:25 No routes matched location "/Reel/src/App"

How to fix this index.tsx:25 No routes matched location "/Reel/src/App" i want that when a user click on the image than reels start playing so when i add but now the error is coming in console index.tsx:25 No routes matched location "/Reel/src/App" how to fix that inside my social media app project i have one reels project means their are two projects pls tell the image pls tell how to fix this at least try to fix this problem..
import { Header } from "../../features/theme/Header";
import styles from "./Home.module.css";
import { useAppSelector } from "../../app/hooks";
import { Feed } from "../../features";
import { Link } from "react-router-dom";
import './Reel/src/App'
export function Home(): JSX.Element {
const { currentUserImage } = useAppSelector((state) => state.currentUser);
return (
<div className={styles.home}>
<Header page="Home" />
<div className={styles.tweetField}>
<div className={styles.userAvatar}>
<img src={currentUserImage} alt="" />
<h1>Mowe</h1>
</div>
<Link to="/Reel/src/App">
<div className={styles.userAvatar}>
<img src={currentUserImage} alt=""/>
<h1>Haewae</h1>
</div>
</Link>
<div className={styles.userAvatar}>
<img src={currentUserImage} alt="" />
<h1>‎ ‎ ‎ Lveewe</h1>
</div>
<div className={styles.userAvatar}>
<img src={currentUserImage} alt=""/>
<h1>gy</h1>
</div>
<div>
<div>
</div>
</div>
</div>
<Feed />
</div>
);
}

Cannot use images with props in React

I'm trying to send an image as a prop from
import React from "react";
import "./home.css";
import Product from "./Product";
function Home() {
return (
<div className="home">
<div className="home-container">
<img
className="home-image"
src={require("./nathan-oakley-gj1dnc7yRG0-unsplash.jpg")}
alt=""
/>
<div className="home-row">
<Product
title="Sofa Couch"
price={5000}
image={"./phillip-goldsberry-fZuleEfeA1Q-unsplash.jpg"}
rating={5}
/>
<Product />
</div>
<div className="home-row">
<Product />
<Product />
<Product />
</div>
<div className="home-row">
<Product />
<Product />
</div>
</div>
</div>
);
}
export default Home;
in the home-row class to
import React from "react";
import "./product.css";
function Product({ title, image, price, rating }) {
return (
<div className="product">
<div className="product-info">
<p>{title}</p>
<p>
<small>$</small>
<strong>{price}</strong>
</p>
<div className="product-rating">
{Array(rating)
.fill()
.map((_, i) => (
<p>*</p>
))}
</div>
</div>
<img src={require(`${image}`)} alt="" />
<button>Add to Basket</button>
</div>
);
}
export default Product;
this file. But the image is not showing. Even if I remove require it doesn't show up.
Earlier I was using a local image and it was working with require. But this doesn't.
When I inspect it with console, it says uncaught error, cannot find module 'image name'.

how to use background image using props using reactjs

here is my code where i'm trying to pass object like{title,description,backgroundImg ....} to section component using props , I am getting all the key & value but when I use it on section component getting all data value instead of backgroundImg why..?
import React from "react";
import Section from "./Section";
function Home() {
return (
<div>
<div className="container">
<Section
title="Model S"
description="Order Online for Touchless Delivery"
backgroundImg="model-s.jpg"
leftButton="custom order"
rightButton="existing inventory"
/>
<Section
title="Model Y"
description="Order Online for Touchless Delivery"
backgroundImg="../images/model-y.jpg"
leftButton="custom order"
rightButton="existing inventory"
/>
</div>
);
}
export default Home;
to
import React from "react";
import DownArrow from "../images/down-arrow.svg";
const Section = (props) => {
return (
<div
className="Wrap"
style={{ backgroundImage: `url(${props.backgroundImg})` }}
>
<div className="item_text">
<h1>{props.title}</h1>
<p>{props.description}</p>
</div>
<div className="">
<div className="item_buttom">
<div className="leftButton">{props.leftButton}</div>
<div className="RightButton">{props.rightButton}</div>
</div>
<div>
<img src={DownArrow} alt="svgImg" className="DownArrow" />
</div>
</div>
</div>
);
};
export default Section;
My image folder path is "../images/..."

You need to import image in your home component.
Like
import sectionImage from "../images/image.jpg";
then pass the image like
<Section
backgroundImg={sectionImage}
/>
Then it should work fine.

I can't pass picture from my Mock data to component ReactJS

mock.jsexample photo
as you can see at the photo. I have a problem with passing my photos to component. I dont want to import my photo at the component. I want to take photos from mock.js but they do not appear at localhost. How can I get through this ?
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
import React from "react";
import "./style.scss";
import { IoIosRadioButtonOn } from "react-icons/io";
export default function requestCard(props) {
return (
<div className="Card">
<div className="Card-Top">
<div className="Top-Left">
<IoIosRadioButtonOn />
<h4 contentEditable="true">{props.data.Status}</h4>
</div>
<div className="Top-Right">
<h4>{props.data.Date}</h4>
</div>
</div>
<div className="Card-Middle">
<h2>{props.data.CutStyle}</h2>
<p>{props.data.client}</p>
</div>
<div className="Card-Bottom">
<img src={props.data.Picture} alt="" />
<h2>{props.data.name}</h2>
</div>
</div>
);
}

how to write multiple components

my react code is in a single component, how to make this two components for images container and showroom images?
import React, { Component } from 'react';
export default class App extends Component {
render() {
return (
<div className="container-fluid">
<div className="images-container images" >
<img src="images/image1.jpg" />
<img src="images/image2.jpg" />
<img src="images/image3.jpg" />
<img src="images/image4.jpg" />
<img src="images/image5.jpg" />
<img src="images/image6.jpg" />
<hr/>
<p><span className="glyphicon glyphicon-heart-empty like">
</span>Like</p>
</div>
<div className="showroom images-container1 " >
<img src="images/showroom.jpg" />
</div>
</div>
);
}
}
Any help would be appreciated,
thanks.

I would suggest you to create a separate file for each components and import in your app.js.
your app.js
import React, { Component } from 'react';
import Images from './Images';
import Showroom from './Showroom';
export default class App extends Component {
render() {
return (
<div>
<Images />
<Showroom />
</div>
);
}
}
your Images.js in the same folder.
import React, { Component } from 'react';
class Images extends Component {
render() {
return (
<div className="container-fluid">
<div className="images-container images" >
<img src="images/image1.jpg" />
<img src="images/image2.jpg" />
<img src="images/image3.jpg" />
<img src="images/image4.jpg" />
<img src="images/image5.jpg" />
<img src="images/image6.jpg" />
<p><span className="glyphicon glyphicon-heart-empty like">
</span>Like</p>
</div>
);
}
}
export default Images;
your Showroom.js in the same folder.
import React, { Component } from 'react';
class Showroom extends Component {
render() {
return (
<div className="showroom images-container1 " >
<img src="images/showroom.jpg" />
</div>
</div>
);
}
}
export default Showroom;
Hope you get your answer. Let me know. Thanks

import React, { Component } from 'react';
export default class Images extends Component {
render() {
return (
<div className="container-fluid">
<div className="images-container images" >
<img src="images/image1.jpg" />
<img src="images/image2.jpg" />
<img src="images/image3.jpg" />
<img src="images/image4.jpg" />
<img src="images/image5.jpg" />
<img src="images/image6.jpg" />
<hr/>
<p><span className="glyphicon glyphicon-heart-empty like">
</span>Like</p>
</div>
);
}
}
export default class Showroom extends Component {
render() {
return (
<Images />
<div className="showroom images-container1 " >
<img src="images/showroom.jpg" />
</div>
</div>
);
}
}
export default class App extends Component {
render() {
return (
<Showroom />
);
}
}

Categories

Resources