Develop Reference

Open Weather API icons not showing up on react project

I am making a weather application that tells what is the current temperature depending on what city you inputed, and I want to use the API Icons but I cant seem to make them work as only a default image icon pops up in place of the weather icon.
Everything Else seems to be working fine for the most part.
App.js
import axios from "axios";
import { useState } from "react";
function App() {
const [data,setData]=useState({})
const [location,setLocation]=useState('')
const url= `https://api.openweathermap.org/data/2.5/weather?q=${location}&appid=1f35643112b0237f679250d783dd2abf&units=imperial`
const value = data.weather
const imgurl = `http://openweathermap.org/img/${value?value[0].icon:null}.png`
const searchLocation=(event)=>{
if(event.key==='Enter'){
axios.get(url).then((response)=>{
setData(response.data)
console.log(response.data)
})
setLocation('')
}
}
return (
<div className="App">
<div className="search">
<input
value={location}
onChange={event=>setLocation(event.target.value)}
onKeyPress={searchLocation}
placeholder='Enter Location'
type='text'
/>
</div>
<div className="container">
<div className="top">
<div className="Location">
<p>{data.name}</p>
</div>
<div className="temp">
{data.main?<h1>{data.main.temp.toFixed()}°F</h1>:null}
</div>
<div className="description">
{data.weather ?<p>{data.weather[0].main}</p>:null}
</div>
<div className="Icon">
<img src='imgurl' width="120" height="100"></img>
</div>
</div>
{data.name!=undefined&&
<div className="bottom">
<div className="feels">
{data.main ?<p>{data.main.feels_like.toFixed()}°F</p>:null}
<p>Feels Like</p>
</div>
<div className="humidity">
{data.main ?<p>{data.main.humidity.toFixed()}%</p>:null}
<p>humidity</p>
</div>
<div className="wind">
{data.wind ?<p>{data.wind.speed.toFixed()} MPH</p>:null}
<p>Wind Speed</p>
</div>
</div>
}
</div>
</div>
);
}
export default App;
Im fairly new to React.js and am still getting used to everything any form of help would be much apprecciated!

You need to change
<img src='imgurl' width="120" height="100"></img>
to
<img src={imgurl} width="120" height="100"></img>
As imgurl is a JS variable, the curly braces are needed.

cannot export react class

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";

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.

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

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;

materializecss with reactjs (how to import javascript/Jquery in reactjs)

Good day! im trying to work with parallax(materializecss) in reactjs but the pictures does not come out.
i already install the materializecss using npm,
heres my code:
import React from 'react';
import 'materialize-css';
import 'materialize-css/dist/css/materialize.min.css';
import Pic1 from '../img/Pic1.jpg'
import Pic2 from '../img/Pic2.jpg';
import 'materialize-css/js/parallax';
const About = () => {
return (
<div className="paralax">
<div className="parallax-container">
<div className="parallax"><img src={Pic1} alt="Building"/></div>
</div>
<div className="class section white">
<div className="row container">
<h2 className="header">Parallax</h2>
<p className="grey-text text-darken-3 ligthen-3">
Parallax is an effect where the background content or image in this case, is moved at a different speed than the foreground content while scrolling.
</p>
</div>
</div>
<div className="parallax-container">
<div className="parallax"><img src={Pic2} alt="Building"/></div>
</div>
</div>
)
}
export default About;

Use react-materialize.
Install: npm install react-materialize
And import Parallax like import {Parallax} from 'react-materialize';
Hence your code becomes:
import React, { Component } from 'react';
import './App.css';
import {Parallax} from 'react-materialize';
class App extends Component {
render() {
return (
<div>
<Parallax imageSrc="http://materializecss.com/images/parallax1.jpg"/>
<div className="section white">
<div className="row container">
<h2 className="header">Parallax</h2>
<p className="grey-text text-darken-3 lighten-3">Parallax is an effect where the background content or image in this case, is moved at a different speed than the foreground content while scrolling.</p>
</div>
</div>
<Parallax imageSrc="http://materializecss.com/images/parallax2.jpg"/>
</div>
);
}
}
export default App;
I have used image hyperlinks. But you can replace them with static images also.
Also, import jquery befor materialise.min.js in your index.html
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>
For Reference : https://react-materialize.github.io/#/
PEACE

To use Javascript components of Materialize CSS, we need to get the reference of that particular element that we're gonna use.
We're using ref because we're triggering imperative animations.
When to Use Refs
Triggering imperative animations.
Integrating with third-party DOM libraries.
As we're using MaterializeCSS which is a third-party CSS framework so in order to use the animations of that we're using ref.
When to use refs in React
CodeSandbox - Parallax Demo
You can check other Materialize CSS components in React from this repository - GermaVinsmoke - Reactize
import React, { Component } from "react";
import M from "materialize-css";
import "materialize-css/dist/css/materialize.min.css";
import Image1 from "../public/parallax2.jpg";
import Image2 from "../public/parallax1.jpg";
class Parallax extends Component {
componentDidMount() {
M.Parallax.init(this.Parallax1);
M.Parallax.init(this.Parallax2);
}
render() {
return (
<>
<div className="parallax-container">
<div
ref={Parallax => {
this.Parallax1 = Parallax;
}}
className="parallax"
>
<img src={Image2} />
</div>
</div>
<div className="section white">
<div className="row container">
<h2 className="header">Parallax</h2>
<p className="grey-text text-darken-3 lighten-3">
Parallax is an effect where the background content or image in
this case, is moved at a different speed than the foreground
content while scrolling.
</p>
</div>
</div>
<div
ref={Parallax => {
this.Parallax2 = Parallax;
}}
className="parallax-container"
>
<div className="parallax">
<img src={Image1} />
</div>
</div>
</>
);
}
}
export default Parallax;