Having this file:
Product.jsx:
class Product extends React.Component{
render(){
return (
<div className='item'>
<div className='image'>
<img src="images/products/image-aqua.png" />
</div>
<div className="middle aligned content">
<div className="description">
<a>Fort Knight</a>
<p>Authentic renaissance actors, delivered in just two weeks.</p>
</div>
<div className="extra">
<span>Submitted by:</span>
<img src="images/avatars/daniel.jpg" className="ui avatar image" />
</div>
</div>
</div>
)
}
}
export default Product;
and ProductList.jsx:
import Product from "./Product";
class ProductList extends React.Component{
render(){
return (
<div className='ui unstackable items'>
<Product />
</div>
)
}
}
ReactDOM.render(
<ProductList />,
document.getElementById('content')
);
The React Class <Product /> is not rendered (If I try to simply paste the Product class into ProductList.jsx, no problem then, but I want separate files for each class, how to achieve that?)
Use in Product.jsx the import React from "react";
demo in stackblitz
First import React at the top.
import React from "react";
Second you might be giving the wrong address at the top. Make sure it is right. You know the path well. Apart from these I don't see any problem with the code.
import Product from "./Product";
Related
When I started the project, I never thought of adding a cart, but now I want to.
Let me tell you the structure,
I have a jsx called Pricetag.jsx in which I have defined how my card will look like it has name, image, and add to cart.
Here is my Pricetag.jsx
import React from 'react'
import './Body.css'
// import './Cart.js'
import { useState } from 'react'
export default function Pricetag(props) {
const [count, setCartCount] = useState([]);
return (
<div>
<div className="card1">
<div className="image">
<img src={props.images} alt="" className='card-image' />
</div>
<div className="content">
<div className="name">
{props.name}
</div>
</div>
<div className="button">
<button className='btn no1' id='cartbutton' onClick={() => setCartCount(count + 1)} >
Add to cart
</button>
<br></br>
</div>
</div>
</div>
)
}
And this is the Birthday.jsx where I have used Pricetag information using props,
import React from 'react'
import './Body.css'
import { Link } from 'react-router-dom'
import Pricetag from './Pricetag'
import image80 from './assets/cake80.jpeg'
import image81 from './assets/cake81.jpeg'
export default function Cakebody(props) {
return (
<>
<Link to='/' className="menulink con112 ">
<div className='name1' >Back to home page</div>
</Link>
<div className="headingbody">
{props.title}
</div>
<hr className='latestline' />
<div className='container1'>
<Pricetag images={image80} name="Doll Cake" bold="Rs 345" cut="Rs 634" />
<Pricetag images={image81} name="Mixed Platte Cake" bold="Rs 345" cut="Rs 634" />
</div> </>
)
}
Now first I tried my self, then after watching some tutorials I noticed that they all are using objects to store data -> id, name, price, and all but, is there any way I can do it without it.
I want to some how grab the name and image of the cake from the birthday.jsx and want to send it to a new cart.jsx.
In fact JS is an object, everything in JS is kind of an object
if you find way to do something is JS without using object let me know
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.
Hi I am very new to react and coding so please baby me in your explanations.
I have created a component in react named Header1. I have used dynamic text using props so I can change the wording for each time I use the Header1 component. I am wondering how do I do that for the style. I would like one card to have pink text and another to have blue text. Please help! And thank you in advance :)
The following is the creation of the Header1 component:
import React from 'react';
import WhiteMap from '../img/other/whiteWorld.png';
import HeaderScss from './_Header1.scss'
const header1 = (props, style)=>{
return <div className="main--container">
<header className="header--container__inside">
<section className="header--container__left">
<h1>
{props.headerTitle}
{style.headerTitleS}
</h1>
<p>
{props.headerDescription}
</p>
</section>
<section className="header--container__right">
<div className="header--pic">
<img src={WhiteMap} alt="World map with a circle highlighting Australia"/>
</div>
</section>
</header>
</div>
};
export default header1;
The following is the main App.js file where I am using the Header1 component twice:
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Navigation1 from './Navigation/Navigation1';
import Header1 from './Header/Header1';
import SaveMoney1 from './SaveMoney/SaveMoney1';
import Airports1 from './Airports/Airports1';
// import SydneyCards1 from './SydneyCards/SydneyCards1';
import ThingsYouShouldKnow1 from './ThingsYouShouldKnow/ThingsYouShouldKnow1';
// import BucketList1 from './BucketlistCards/BucketlistCards1';
// import Footer1 from './Footer/Footer1';
import styles from './appStyles.module.css';
class App extends Component {
render() {
return (
<div className="App">
<Navigation1 />
<Header1 headerTitle="Fly to" headerDescription=" Selia."/>
<SaveMoney1/>
<Airports1/>
<Header1 headerTitle="Things you should know" headerDescription ="Based on customer bookings,
{/* <BucketList1/> */}
{/* <SydneyCards1/> */}
{/* <Footer1/> */}
</div>
);
}
}
export default App;
One of the ways would be using styles, like you're trying to do in your example. Try to do something like this
const Header = (props) => {
return <h1 style={props.style}>{props.title}</h1>
}
And you would render it like this
const App = () => {
return (
<div>
<Header title="My Header with Blue text" style={{color: "blue"}} />
<Header title="My Header with Red text" style={{color: "red"}} />
</div>
)
}
Note: You can do the same passing a CSS class as a prop instead of the exact style object.
I've created a component (in spotifyPlaylist.js) and as the first step I am trying to have the app show this component as a list box next to others, however this new component doesn't even show when I inspect the page (screenshot below). I'm a newbie so any feedback helps, thank you!
Created the component in ./spotifyList/spotifyList
import './spotifyPlaylist.css';
export class spotifyPlaylist extends React.Component {
render() {
return (
<div className="spotifyPlaylist">
<input defaultValue="Existing Playlist" />
</div>);}}
Imported it in App.js (it's the main file)
import { spotifyPlaylist } from '../spotifyPlaylist/spotifyPlaylist';
Added into the App component's render.
...
render() {
return (
<div>
<div className="App">
<SearchBar onSearch={this.search} />
<div className="App-playlist">
<SearchResults
onAdd={this.addTrack}
searchResults={this.state.searchResults}
/>
<Playlist
playlistName={this.state.playlistName}
playlistTracks={this.state.playlistTracks}
onRemove={this.removeTrack}
onNameChange={this.updatePlaylistName}
onSave={this.savePlaylist}
/>
<spotifyPlaylist />
</div>
</div>
</div>
</div>
);
}
}```
In react component names have to start with a capital letter to be used in jsx, so ether rename it on the import:
import { spotifyPlaylist as SpotifyPlaylist } from '../spotifyPlaylist/spotifyPlaylist';
AND
<SpotifyPlaylist />
OR rename it all together
I have the following Problem:
When I enter the URL to my image directly in the component, it works and gets displayed:
import React, { Component } from 'react';
import './Service.css';
class Service extends Component {
render() {
return (
<div>
<h2 className="logo">{this.props.serviceName}</h2>
<img src={require("../../images/project_management.jpg")} width="150" alt="Smiley face" />
</div>
);
}
}
export default Service;
But when I send the image url through the "props" from the outer component it does not work, although ist the exact same string. I get "Error: Cannot find module '../../images/project_management.jpg'"
import React, { Component } from 'react';
import './Home.css';
import Service from './modules/Service';
class Home extends Component {
render() {
return (
<div className="outer-container">
<div className="inner-container">
<Service serviceName="Project Manager" img="../../images/project_management.jpg" />
</div>
</div>
);
}
}
export default Home;
import React, { Component } from 'react';
import './Service.css';
class Service extends Component {
render() {
return (
<div>
<h2 className="logo">{this.props.serviceName}</h2>
<img src={require(this.props.img)} width="150" alt="Smiley face" />
</div>
);
}
}
export default Service;
Can anybody give me a hint?
Thanks
Regards
This is probably (you have to confirm this) you are using webpack and an image loader to load the content. Webpack will make a static analysis to understand which static assets it needs to include, however, when you make a dynamic require (this means, require a variable) like require(this.props.image) webpack has no idea at bunndle time of what you want to load.
The solution is to always load the full path to the image, then pass that on props:
import React, { Component } from 'react';
import './Home.css';
import Service from './modules/Service';
class Home extends Component {
render() {
return (
<div className="outer-container">
<div className="inner-container">
<Service serviceName="Project Manager" img={require("../../images/project_management.jpg")} />
</div>
</div>
);
}
}
export default Home;
import React, { Component } from 'react';
import './Service.css';
class Service extends Component {
render() {
return (
<div>
<h2 className="logo">{this.props.serviceName}</h2>
<img src={this.props.img} width="150" alt="Smiley face" />
</div>
);
}
}
export default Service;
This is the correct way of doing it if you are using any image bundler that works like I described.
Use absolute path to image instead of relative
<Service serviceName="Project Manager" img={absoltePathToImage} />
Service tries to find the image relative to it's path and fails
If you want to use relative paths(bad idea)
Use
<Service serviceName="Project Manager" img="../../../images/project_management.jpg" />
As service is one layer deeper to Home
instead of using require like one in your code
<img src={require("../../images/project_management.jpg")} width="150" alt="Smiley face" />
you should provide and url directly to src atrib and use it as:
<img src={this.props.img} width="150" alt="Smiley face" />
thank you. Moving the "require"-Statement to the outer component solved the problem:
import React, { Component } from 'react';
import './Home.css';
import Service from './modules/Service';
class Home extends Component {
render() {
return (
<div className="outer-container">
<div className="inner-container">
<Service serviceName="Project Manager" img={require("../images/project_management.jpg")} />
<Service serviceName="Software Engineer" img={require("../images/project_management3.jpg")} />
<Service serviceName="Web Developer" img={require("../images/web_development.jpg")} />
</div>
<div className="inner-container">
<Service serviceName="Requirements Enigneer" img={require("../images/requirements_engineering.jpg")} />
<Service serviceName="Quality Manager" img={require("../images/quality_management.jpg")} />
<Service serviceName="Trainer" img={require("../images/trainer.jpg")} />
</div>
</div>
);
}
}
export default Home;