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
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
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";
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 created one component and I'm exporting it
import React , {Component} from 'react'
import logo from './logo.svg';
class Item extends Component {
render () {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">ReactND - Coding Practice</h1>
</header>
<h2>Shopping List</h2>
<form onSubmit={this.addItem}>
<input
type="text"
placeholder="Enter New Item"
value={this.state.value}
onChange={this.handleChange}
/>
<button disabled={this.inputIsEmpty()}>Add</button>
</form>
<button onClick={this.deleteLastItem} disabled={this.noItemsFound()}>
Delete Last Item
</button>
</div>
)
}
}
export default Item
And I want to use this component in my app component as below
import React from 'react';
import './Item';
class App extends React.Component {
render() {
return (
<div>
<Item />
</div>
);
}
}
export default App;
But I got this error in App.js
Line 9: 'Item' is not defined react/jsx-no-undef
pretty sure I did everything. I have exported and imported this component , so what I'm missing here?
You have to name your import.
import React from 'react';
import Item from './Item';
class App extends React.Component {
render() {
return (
<div>
<Item />
</div>
);
}
}
export default App;
I created a Reactjs app by create-react-app.
... but the components are not shown in the page, I think it is probably because App.js is not rendering the components?
Here is my code:
App.js
import React, { Component } from 'react';
import './App.css';
import login from "./containers/login/login";
class App extends Component {
render() {
return (
<div className="App">
<login/>
</div>
);
}
}
export default App;
/containers/login/login.js
import React, { Component } from 'react';
import "./login.css";
class login extends Component {
render() {
return (
<div className="headings">
<form action="">
Username <br/>
<input type="text" name="userrname" />
<br/>
Password <br/>
<input type="password" name="password" />
<br/>
<input type="submit" value="Login" />
</form>
</div>
);
}
}
export default login;
The component in the browser is like this:
<login></login>
Your own component need to start with a capital letter, or Babel will treat them as strings.
Rename the variable to Login and it will work.
import Login from "./containers/login/login";
class App extends Component {
render() {
return (
<div className="App">
<Login />
</div>
);
}
}