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.
Related
i'm creating a blog. in my index.js i have a left sidebar that shows the article links.
What I'm trying to do is when I click on the link the post content should be shown in the right sidebar of my index.js
At the moment it's been opened in a new page.
index.js
const IndexPage = ({
data: {
allMarkdownRemark: { edges },
},
}) => {
const PostData = edges[0]
const Posts = edges
.filter(edge => !!edge.node.frontmatter.date) // You can filter your posts based on some criteria
.map(edge => <PostLink key={edge.node.id} post={edge.node} />)
return (
<div className='html-container'>
<div className='main-container'>
<div className='row'>
<div className='left-sidebar'>
<div className='logo'>
<p>logo</p>
</div>
<div className='menu'>
{Posts}
</div>
<div className='social'>
<img src={twitch} />
<img src={discord} />
<img src={twitter} />
<img src={email} />
</div>
</div>
<div className='right-sidebar'>
</div>
</div>
</div>
</div>
)
}
post-link.js
import React from "react"
import { Link } from "gatsby"
const PostLink = ({ post }) => (
<div>
<Link to={"/blog"+post.frontmatter.slug}>
{post.frontmatter.title}
{/* {post.frontmatter.title} ({post.frontmatter.date}) */}
</Link>
</div>
)
export default PostLink
Check the API of the Link and if it has an equivalent of target attribute.
Basically, I have a nested component that I want to render with the parent component and it's working fine when the server starts.
But the problem arises when I switch back from another page. Some of the nested components get disappeared. If I made a refresh then again everything ok.
How can I solve this issue?
Normal:
Image-1
Component disappeared:
Image-2
Index.js:
import BannerBaseLine from "./../components/HOME/Banner/BannerBaseLine";
import SubSection1 from "./../components/ABOUT/subSection1";
import CoursesList from "../components/HOME/MOSTTRENDING/CoursesList/courseslist";
import ShortOverview from "./../components/HOME/CourseOverviewSection/Section1/shortoverview";
import Testimonial from "./../components/HOME/Testimonial/testimonial";
import ClientItem from "./../components/HOME/Client-area/all-client-item";
export default function HomeMain({categories}) {
return (
<>
<br></br>
<br></br>
<br></br>
<BannerBaseLine categories = {categories} />
<CoursesList />
{/* <SubSection1 /> */}
<ShortOverview />
<CoursesList />
<Testimonial />
<ClientItem />
</>
);
}
export async function getStaticProps(){
const response = await fetch('http://localhost:8000/api/data/categories')
const data = await response.json()
console.log(data)
return {
props:{
categories : data,
}
}
}
BannerBaseLine component:
import BannerBlock from './BannerBlock';
export default function BannerBaseLine({ categories }) {
return (
<>
<section
className="banner-area"
style={{ backgroundImage: "url(assets/img/banner/0.jpg)" }}
>
<div className="container">
<div className="row">
<div className="col-lg-6 col-md-8 align-self-center">
<div className="banner-inner text-md-start text-center">
<h1>
Find the Best <span>Courses</span> & Upgrade{" "}
<span>Your Skills.</span>
</h1>
<div className="banner-content">
<p>
Edufie offers professional training classes and special
features to help you improve your skills.
</p>
</div>
<div className="single-input-wrap">
<input type="text" placeholder="Search your best courses" />
<button>
<i className="fa fa-search"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</section>
<br></br>
<br></br>
<div className="container">
<div className="intro-area-2">
<div className="row justify-content-center">
<div className="col-lg-12">
<div className="intro-slider owl-carousel">
{categories.map((category) => {
return (
<>
<BannerBlock category={category} key={category.id} />
</>
);
})}
</div>
</div>
</div>
</div>
</div>
</>
);
}
BannerBlock component:
export default function BannerBlock({category}) {
console.log(category);
return (
<div className="item">
<div className="single-intro-wrap">
<div className="thumb">
<img src={category.image} alt="img" />
</div>
<div className="wrap-details">
<h6>
{category.Base_Category_Title}
</h6>
<p>236 Course Available</p>
</div>
</div>
</div>
);
}
From https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation
Note: You should not use fetch() to call an API route in
getStaticProps. Instead, directly import the logic used inside your
API route. You may need to slightly refactor your code for this
approach.
Fetching from an external API is fine!
you should check if categories exist
export default function HomeMain({categories}) {
if(categories){
return <Loading Component />
}
rest of the code...
}
I don't want to creater another table called friends at strapi and link it again to visual studio code, so I have a Characters table for all team and friends. So I want to input only new data at Characters , but filter it to know which one is friend or team. So I've tried to make a function for it to know's which is a friend, that I've determined with if you have only start date your a team if you have both start and end date you are friend. The source code at the file is this:
import Head from 'next/head'
import Layout from '../../components/Layout'
import styles from '../../styles/Home.module.css'
import fetchFromCMS from '../../lib/service';
import React, { Component } from 'react';
import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a loader
import { Carousel } from 'react-responsive-carousel';
export async function getStaticProps() {
const characters = await fetchFromCMS('characters');
return {
props: { characters},
revalidate: 1,
};
}
function sortByDate(a , b){
return new Date(a.StartDate) - new Date(b.StartDate);
}
function isFirend(a ){
var bool = true;
new Date(a.EndDate) != null? bool = true : bool= false;
return bool ;
}
const charactersItem = ({ characters }) => {
return (
<Layout>
<div className={styles.container}>
<Head>
<title>Characters</title>
</Head>
<main className={styles.main} id="page-top">
{/*///Team*/ }
<section className="bg-light page-section">
<div className="container">
<div className="row">
<div className="col-lg-12 text-center">
<h2 className="section-heading text-uppercase">Our Amazing Team</h2>
<h3 className="section-subheading text-muted">Check out our fantastic team.</h3>
</div>
</div>
<div className="row">
{characters.sort().map((character) => (
<div className="col-sm-4">
<a href={`/Team/${character.Slug}`}>
<div className="team-member">
<img className="mx-auto rounded-circle" src={character.Image.url} alt=""></img>
<h4 className="text-muted">{character.PaineapleName}</h4>
</div>
</a>
</div>
))
}
</div>
</div>
</section>
{/*//friends*/}
{ <section className="bg-light page-section">
<div className="container">
<div className="row">
<div className="col-lg-12 text-center">
<h2 className="section-heading text-uppercase">Our Amazing Friends</h2>
<h3 className="section-subheading text-muted">Check out our fantastic team.</h3>
</div>
</div>
<div className="row">
{characters.sort(character.EndDate).map((character) => (
<div className="col-sm-4">
<a href={`/Team/${character.Slug}`}>
<div className="team-member">
<img className="mx-auto rounded-circle" src={character.Image.url} alt=""></img>
<h4 className="text-muted">{character.PaineapleName}</h4>
</div>
</a>
</div>
))
}
</div>
</div>
</section> }
</main>
</div>
</Layout>
)
};
export default charactersItem;
The results aren't what I've expected because and the error it shows is this one:
I try other solutions and the only way I did something nearby the objective it duplicated, I mean with this, it duplicated the info instead of filter which one is friend.
character.endDate is not a compare function. It's possible Characters is the issue but you should isolate each issue one by one to troubleshoot.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
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.
mock.jsexample photo
as you can see at the photo. I have a problem with passing my photos to component. I dont want to import my photo at the component. I want to take photos from mock.js but they do not appear at localhost. How can I get through this ?
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
import React from "react";
import "./style.scss";
import { IoIosRadioButtonOn } from "react-icons/io";
export default function requestCard(props) {
return (
<div className="Card">
<div className="Card-Top">
<div className="Top-Left">
<IoIosRadioButtonOn />
<h4 contentEditable="true">{props.data.Status}</h4>
</div>
<div className="Top-Right">
<h4>{props.data.Date}</h4>
</div>
</div>
<div className="Card-Middle">
<h2>{props.data.CutStyle}</h2>
<p>{props.data.client}</p>
</div>
<div className="Card-Bottom">
<img src={props.data.Picture} alt="" />
<h2>{props.data.name}</h2>
</div>
</div>
);
}