We Keep Coding

Images not showing in React?

I'm following along with a Scrimba tutorial on React and I'm doing it on my own machine locally.
I have an image in my images folder within my src folder.
In my components folder I have a component called Card which is shown but why is my image only shown when I import it and not like the other two ways which are commented out?
Might be something stupid but I can't see it. Thanks all.
Just for clarity everything else works bar the image tags commented out.
App.js
function App() {
return (
<div>
<Navbar />
<Hero />
<Card
img="katie-zaferes.png"
rating="5.0"
reviewCount="6"
country="USA"
title="Life Lessons With Katie Zaferes"
price={136}
/>
</div>
);
}
Card.js
import Star from "../images/star.png";
import Athlete from "../images/katie-zaferes.png";
const Card = (props) => {
return (
<div className="card">
<img src={Athlete} alt="card-image" />
{/* <img src="../images/katie-zaferes.png" alt="img" /> */}
{/* <img src={`../images/${props.img}`} alt="card-image" /> */}
<div className="card--stats">
<img src={Star} alt="star" className="card--star" />
<span>{props.rating}</span>
<span className="gray">{props.reviewCount} •</span>
<span className="gray">{props.country}</span>
</div>
<p>{props.title}</p>
<p>
<b>From $ {props.price} </b> / person
</p>
</div>
);
};
export default Card;

I figured out it was an image path issue. I placed my 'images' folder in 'public'. I could then remove all imports and access them anywhere through '/images/example.png'.
Used in a component as shown below:
const Card = (props) => {
return (
<div className="card">
<img src={`/images/${props.img}`} alt="card" />
<div className="card--stats">
<img src="/images/star.png" alt="star" className="card--star" />
<span>{props.rating}</span>
<span className="gray">{props.reviewCount} • </span>
<span className="gray">{props.country}</span>
</div>
<p>{props.title}</p>
<p>
<b>From $ {props.price} </b> / person
</p>
</div>
);
};
export default Card;

If you cant put the 'images' folder in 'public' because create-react-app doesn't let you, put your path as a string literal inside a required function, it worked for me
const Card = (props) => {
return (
<div className="card">
<img src={require(`../images/${props.img}`)} alt="card" />
<div className="card--stats">
<img src="/images/star.png" alt="star" className="card--star" />
<span>{props.rating}</span>
<span className="gray">{props.reviewCount} • </span>
<span className="gray">{props.country}</span>
</div>
<p>{props.title}</p>
<p>
<b>From $ {props.price} </b> / person
</p>
</div>
);
};
export default Card;
This path works assuming you have your 'image' folder as a sibling to you 'component' folder

In the case of the image you are trying to show on your App.js, you are giving your Card component a wrong path to find your image, your app needs to know where to find your "katie-zaferes.png" image, so the right way should be:
<Card
img='../images/katie-zaferes.png'
...
/>
(I'm assuming that your App.js and your Card.js files are on the same folder, in case they're not, you have to modify the path to match your /images/katie-zaferes.png)
Note: By the way, for your next questions here in StackOverflow, try to write your code directly on your post, using the Javascript/HTML/CSS button, never use images because it makes more work for people to answer your question/

Gatsby - Nestled Component Not Rendered

Sorry if there's a really simple solution, but building websites isn't my area of expertise.
I'm currently trying to create a Gatsby website where I have a Component nestled inside another Component but it shows a completely blank screen when I try to show the nestled Component. Following the answer from this question, I implemented a Layout Component that serves as a template for every site. In the future, I plan to tidy up the navigation bar and implement that into the Layout Component, but that's an issue for another time.
I'm currently trying to put in a Tile Component into my Layout that is also encapsulated inside my IndexPage, but my screen just shows nothing when I try to run it. I've tried to shorten the code so that it includes the minimum amount required.
I've taken a look at the Gatsby documentation and it appears that under the "Non-page components" section that I should use GraphQL, which I'm not sure how it works.
I suspect that the reason why it isn't working is that the Tile Component has to take in an imgLocation, altText, and caption properties, and somewhere along the way the code isn't working as intended.
Code:
index.js:
import * as React from "react"
import Layout from './Layout.js';
import Tile from './Tile.js';
// markup
const IndexPage = () => {
return (
<Layout pageTitle="Home">
<div id="main">
<div className="inner">
<h1>
<b>Portfolio</b>
</h1>
<p>
Here's all of the work that I've been commissioned to do over the past few years.
</p>
<h2>
<b>Christmas</b>
</h2>
<h3>
<b>Portrait</b>
</h3>
<section className="tiles">
<Tile imgLocation="imageFileLocationGoesHere" altText="descriptionOfImage" caption="Image Description" />
<Tile imgLocation="imageFileLocationGoesHere" altText="descriptionOfImage" caption="Image Description" />
</section>
<br />
<h3>
<b>Landscape</b>
</h3>
<section className="tiles">
<Tile imgLocation="imageFileLocationGoesHere" altText="descriptionOfImage" caption="Image Description" />
<Tile imgLocation="imageFileLocationGoesHere" altText="descriptionOfImage" caption="Image Description" />
</section>
</div>
</div>
{/* Footer */}
<footer id="footer">
{/* footer goes here */}
</footer>
</Layout>
)
}
export default IndexPage;
Tile.js (within the same folder as index.js):
import React from "react";
import '../css/main.css';
const Tile = (props) => {
const imgLocation = props.imgLocation;
const altText = props.altText;
const caption = props.caption;
return (
<article>
<span>
<img src={require({imgLocation}).default} alt={altText} onClick={() => {openModal(props)}} />
</span>
<br />
<p>{caption}</p>
</article>
);
}
export default Tile;
Layout.js (within the same folder as in index.js)
import * as React from 'react';
const Layout = ({pageTitle, children}) => {
return (
<main>
<title>{pageTitle}</title>
<meta charSet="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, user-scalable=no"
/>
{children}
</main>
)
}
export default Layout;

The problem you are facing here is that your Tile component is inside the /pages folder as you pointed here:
Tile.js (within the same folder as index.js):
So, Gatsby is trying to create a page based on the Tile component, hence, you are trying to render a page inside a page.
Move your component into another folder such as src/components/Tile and the issue should be gone.
Layout component also needs to be outside /pages folder.
Regarding the image, try to import it in the parent component and lift it to the child like:
import * as React from "react"
import Layout from './Layout.js';
import Tile from './Tile.js';
...
<Tile imgLocation={'./path/to/your/image.png'} />
And then:
<img src={imgLocation} alt={altText} onClick={() => {openModal(props)}} />
Or even drilling the image directly:
import Img from './path/to/your/image.png'
...
<Tile img={Img} />
Then:
const Tile = ({img:Img, altText, caption}) => {
return (
<article>
<span>
<Img />
</span>
<br />
<p>{caption}</p>
</article>
);
}
export default Tile;
Reassigning the img props as React component should also do the trick

Can't we iterate material-ui inside an array in React.js?

I have been trying to use material-ui and iterate over it inside an array ( for creating ratings for some items like in e-commerce sites). The code isn't working. On my localhost server, it's not showing any stars at all. Before I made it dynamic, it was working all fine, then I added props to my functional component as per to make it dynamic. Everything else is working just fine except that it's not accepting my matrial-ui icon inside the array for me to iterate over. Moreover, the import statement says "it's value is never read although it's imported"
My code: Product.js:
import React from "react";
import "./Product.css";
import StarRateIcon from "#material-ui/icons/StarRate";
function Product({ id, title, image, price, rating }) {
return (
<div className="product">
<div className="product_info">
<p>{title}</p>
<p className="product_price">
<small>$</small>
<strong>{price}</strong>
</p>
<div className="product_rating">
{Array(rating)
.fill()
.map((_, i) => (
<p StarRateIcon className="star" />
))}
</div>
</div>
<img src={image} alt="" />
<button>Add to Basket</button>
</div>
);
}
export default Product;
My home.js file :
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="https://m.media-amazon.com/images/G/01/digital/video/sonata/US3P_JOKER_IMAGE_ID/be07783e-2738-4aaf-b90c-d0ec474d15ae._UR3000,600_SX1500_FMwebp_.jpg"
/>
<div className="home_row">
<Product
id="890778"
title="Description"
price={99.99}
image="https://m.media-amazon.com/images/I/71BGLa7IFtL._AC_UY218_.jpg"
rating={5}
/>
<Product />
</div>
</div>
</div>
);
}
export default Home;
Help Somebody! I can use emoji snippets but I really want this to work. I have imported StarRateIcon and used it. It isn't working.

Looks like you accidentally put a 'p' in front of your icon component name. You have <p StarRateIcon className="star" /> when it should be <StarRateIcon className="star" />

You're rendering a p tag with no content with an invalid attribute, StarRateIcon. It's the reason you're not seeing anything rendered. If you inspect the HTML, you'll most likely see the p tags. You may also see errors in the console about invalid attributes. Your code should look something like this:
Array(rating).fill().map(() => <StarRateIcon className="star" />)

How to make images fit the page in React/Bootstrap?

I am using a function that maps every item in the props array to creating an image tag. I am trying to make every 3 images have a row div around them using bootstrap so they will fit the page correctly, but I cannot figure out how to do it. Any help would be appreciated. Here is the code:
import React, { Component } from 'react';
import "./Skills.css";
export default class Skills extends Component {
static defaultProps = {
images: [
"https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1200px-HTML5_logo_and_wordmark.svg.png",
"https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/CSS3_logo_and_wordmark.svg/1200px-CSS3_logo_and_wordmark.svg.png",
"https://upload.wikimedia.org/wikipedia/commons/6/6a/JavaScript-logo.png",
"https://p7.hiclipart.com/preview/306/37/167/node-js-javascript-web-application-express-js-computer-software-others.jpg",
"https://bs-uploads.toptal.io/blackfish-uploads/skill_page/content/logo_file/logo/5982/express_js-161052138fa79136c0474521906b55e2.png",
"https://webassets.mongodb.com/_com_assets/cms/mongodb_logo1-76twgcu2dm.png",
"https://www.pngfind.com/pngs/m/430-4309307_react-js-transparent-logo-hd-png-download.png",
"https://botw-pd.s3.amazonaws.com/styles/logo-thumbnail/s3/012015/bootstrap.png?itok=GTbtFeUj",
"https://sass-lang.com/assets/img/styleguide/color-1c4aab2b.png"
]
}
photo() {
return (
<div >
{this.props.images.map(image => (
<div className="col-md-4">
<img className="photo" src={image} />
</div>
))}
</div>
);
}
render() {
return (
<div id="skills-background" className="mt-5">
<div id="skills-heading" className="text-center">Skills I've Learned:</div>
<div className="container">
<div className="row">
{this.photo()}
</div>
</div>
</div>
)
}
}
CodeSandbox

I think, I found the issue,
<div> <-----This div is the issue
{this.props.images.map(image => (
<div className="col-md-4">
<img className="photo" src={image} />
</div>
))}
</div>
You have wrapped your col-md-4 with a div, and div has display: block style, so you are getting every image on separate row. Simply replace div with Fragments,
<> <-----Make it Fragment
{this.props.images.map(image => (
<div className="col-md-4">
<img className="photo" src={image} />
</div>
))}
</>

How to disable footer in one of the React JS views without creating new layout?

I have about 20 views that use the same layout. Now i need 1 page which does not use footer. First idea i had is to create a new layout but this does not seem like a good way to do this.
LAYOUT
const App = () => (
<div className="full-container">
<Router history={Router}>
<Main>
<STUFF HERE>
</Main>
</Router>
<Footer/>
</div>
);
VIEW
render()
{
return (
<div>
<h1 className="section-smaller-title">TITLE</h1>
<STUFFHERE>
</div>
</div>
);
}
FOOTER COMPONENT
render() {
return (
<footer>
<img alt="footer logo" className="footer-logo" src="imgsurl"/>
</footer>
);
}
}
How can i not show this Footer in that view?
I tried it with
document.getElementByClassName(...)
But this disabled it everywhere.
What is the standard way of doing this?

You can use Conditional Rendering, specifically Inline If with Logical && Operator. Just change your layout to this:
const App = () => (
<div className="full-container">
<Router history={Router}>
<Main>
<STUFF HERE>
</Main>
</Router>
{location.pathname !== “URL path where you don’t want to see footer” && <Footer/>}
</div>
);
More info about Conditional Rendering at https://facebook.github.io/react/docs/conditional-rendering.html#inline-if-with-logical--operator Hope it will help.