Develop Reference

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.

user is not defined inside map in a component

I am new to react, but I have good understanding of javascript. I don't understand why below code doesn't work.
Here user should be accessible but, I am getting user is not defined.
import './App.css';
import faker from 'faker';
import Comment from './components/comment/comment.component';
function App() {
const users = new Array(10).fill({
commentTime: 'Today 4:00pm',
avatar: faker.image.image(),
comment: faker.lorem.sentence(),
username: faker.name.firstName(),
})
return (
<div className="ui container comments">
users.map((user) => (
<Comment
username={user.username}
comment={user.comment}
commentTime={user.commentTime}
avatar={user.avatar}
/>));
</div>
);
}
export default App;
const Comment = (props) => {
return (
<div className="comment">
<a href="/" className="avatar">
<img src={props.avatar} alt="avatar" />
</a>
<div className="content">
<a href="/" className="author">
{props.username}
</a>
<div className="metadata">
<span className="date">{props.commentDate}</span>
</div>
<div className="text">{props.comment}</div>
</div>
</div>
);
};
export default Comment;
When I remove outer <div className="ui container comments"> it renders fine.

You missed curly brace {}.
return (
<div className="ui container comments">
{users.map((user) => (
<Comment
username={user.username}
comment={user.comment}
commentTime={user.commentTime}
avatar={user.avatar}
/>))
}
</div>
);

JSX fragment has no corresponding closing tag

I am trying to conditionally render some elements if the conditions equal true. But from my understanding it is giving me a "parsing error: adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?" right at line 35 at and below. I have my entire code wrapped in a React.Fragment tag. Please help. I'm not understandign why I am getting this error.
import './ProfilePage.css';
import JournalCard from '../../components/JournalCard/JournalCard';
import { Link } from 'react-router-dom';
import userService from '../../services/userService';
class ProfilePage extends Component {
constructor(props) {
super(props)
}
render() {
return(
<>
<div className="profilePage">
<div className="sign">
<div className="zodiac-sign">{this.props.user.signs}</div>
{this.props.user.signs === this.props.signs.sunSign ?
<div className="info">
<div>image:{this.props.signs.image}</div>
<div>sign: {this.props.signs.sunSign}
<div>Birthdates:{this.props.signs.dates}</div>
<div>Element:{this.props.signs.element}</div>
<div>Planet:{this.props.signs.planet}</div>
<div>Strengths:{this.props.signs.strengths}</div>
<div>Weaknesses:{this.props.signs.weaknesses}</div>
<div>Likes:{this.props.signs.likes}</div>
<div>Dislikes:{this.props.signs.dislikes}</div>
<div>Compatibility:{this.props.signs.compatiblity}</div>
<div>Lucky Numbers:{this.props.sign.luckyNumbers}</div>
</div>
:
<></>
}
</div>
<div className="horoscope">
<h2>Horoscope</h2>
{this.props.user.signs === this.props.horoscopes.sign.name ?
<div className="horoscope-display">{this.props.horoscopes.result.description}</div>
:
<></>
}
</div>
<div className="journal">
<h3>Journal</h3>
<div id="journal-box">
<div className="journal-display">
{this.props.journals.map(journal =>
<JournalCard
key={journal._id}
journal={journal}
handleDeleteJournal={this.props.handleDeleteJournal}
/>
)}
</div>
</div>
<br/>
<Link className="btn pink lighten-1"
to={{ pathname: '/journal' }}>
Add Journal Entry
</Link>
<br/>
</div>
</div>
</>
)
}
}
export default ProfilePage;```

You are missing closing <div> tag in <div className="sign">
it should look like this
<div className="sign">
<div className="zodiac-sign">{this.props.user.signs}</div>
{this.props.user.signs === this.props.signs.sunSign ? (
<div className="info">
<div>image:{this.props.signs.image}</div>
<div>
sign: {this.props.signs.sunSign}
<div>Birthdates:{this.props.signs.dates}</div>
<div>Element:{this.props.signs.element}</div>
<div>Planet:{this.props.signs.planet}</div>
<div>Strengths:{this.props.signs.strengths}</div>
<div>Weaknesses:{this.props.signs.weaknesses}</div>
<div>Likes:{this.props.signs.likes}</div>
<div>Dislikes:{this.props.signs.dislikes}</div>
<div>Compatibility:{this.props.signs.compatiblity}</div>
<div>Lucky Numbers:{this.props.sign.luckyNumbers}</div>
</div>
</div>
) : (
<></>
)}
</div>

Component not loading when route changed

I am using Preact. I first tried preact-router then wouter for routing, but the problem still exists for one specific component. Here is the main entry where all routes defined:
import { h, Component } from 'preact';
import { Route } from "wouter-preact";
import Header from './partials/header';
import Home from './pages/home';
import News from './pages/news';
import Article from './pages/article';
export default class App extends Component {
render() {
return (
<div id="app">
<Header />
<Route path="/"><Home /> </Route> // working perfectly
<Route path="/a/:article"> <Article /> </Route> // not working
<Route path="/n/:newspaper"><News /> </Route> // working
</div>
);
}
}
and here is the simplified second component which is working perfectly :
import { h, Fragment } from 'preact';
import { Link, Route } from "wouter-preact";
import useFetch from '../../utils/ajax';
export default function News() {
const url = window.location.pathname.split('/');
const { data, loading } = useFetch(domain + '/api/v1/news/?newspaper=' + url[2]);
return (
<Fragment>
{loading ? (
// loading indicator
) : (
<main role="main">
<div className="py-5">
<div className="container">
<div className="row">
{data.results.map((nisha, index) => (
<div className="col-sm-6" key={index}>
<div className="col-md-10" >
<div className="card mb-2 shadow-lg" style={{ border: 'none' }} >
<Link href={'/a/' + nisha.slug}>
<img className="card-img-top" src={ nisha.cover_image } alt={ nisha.slug } />
</Link>
<div className="card-body">
// body
<div className="card-footer text-muted">
// footer
</div>
</div>
</div>
</div>
</div>
))}
</div>
</div>
</div>
</main>
)}
</Fragment>
);
}
and finally the problematic component, when I click any link from previous component, browser url changing but the component is not loading (there is no debug console message in browser console).
export default function Article() {
console.log("loaded");
return (
<div className="main">
<div className="py-5">
<div className="column">
<div>example article</div>
</div>
</div>
</div>
);
}