score:4
in order for you to display the icon, you need to use the url and not just icon value. something like this
the value returned from the api is '09d'. so you will have to append the url with string url to have the weather api url appended with image and image extension.
{http://openweathermap.org/img/w/${props.icon}.png
}
few other things noticed in your code is ,
you are setting default values as undefined, which is not correct.
please use proper value, something like
state = { temperature: '', city: '' }
score:0
you have to make change in src attribute of <img>
.
as given in weathermap api you have to request icon by http://openweathermap.org/img/w/10d.png.
replace 10d.png
by props.icon+'.png'
. it will work.
score:2
as per your code in weather.js
<img src ={`http://openweathermap.org/img/w/${this.props.icon}.png`} alt="wthr img" />
it will display the weather icon...ie
import react, { component } from 'react';
class weather extends component {
render() {
return (
<div>
<p>weathernow:
<img src ={`http://openweathermap.org/img/w/${this.props.icon}.png`}
alt="wthr img" />
</p>
</div>
);
}
}
export default weather;
Source: stackoverflow.com
Related Query
- how to display openweather map weather icons react.js
- how to display this data in react with map
- How to display a div element on a specific key in a map in react
- How to use a state value with map function to display repeat ui in react component
- React : How To Map this Array and Display it
- React - JSX syntax issue, and how to iterate with map and display items on newlines
- how to display object data in react with map method
- How do I update state of a functional component from a class component in order to display items from a map in react
- How to display the values from a map on a react web app (javascript)
- How to display POST API data containing string using fetch and map function in React
- How to calculate the distance between differents lat long and display on map dynamically react native
- How can i fix an error of displaying weather Icons in react
- Not sure how to map and display data in react app
- How to display geodjango rest api response on react leaflet Map
- How to display single data using map method for json datatype in React js
- How to display svg icons(.svg files) in UI using React Component?
- How to render react components by using map and join?
- How target DOM with react useRef in map
- How to map an array of objects in React
- How to know if react-router can go back to display back button in react app
- How can I display dotted line in react native
- How to show results of a map in two or more columns using react
- How do I display the content of React Quill without the html markup?
- how to access vairables outside of map function in js and jsx in a React component
- How to render images with React JS using map or loop?
- How can I use React with Google Places API, to display place markers on a Google map?
- How to use animated material ui icons in React
- How to make React Create App Production Error Boundary map to source code
- How to change color of fontawesome icons in modular css React
- How to display every image inside an image folder in react
More Query from same tag
- Extended rules from Styled-Components not working
- Is triggering an action in the store bad practice?
- I would like to style the color of a button to primary if the selected button value equals to any of the `key` of an object
- Next.js Styling - Footer component for some reason is not at the bottom of the screen?
- Passing State data to other component
- How i can do my component in React.js have a individual behavior?
- Saving and Retrieving Quill Data
- DropDown Option Items as one item
- React.js Creating a Dynamic table with Dynamic Columns and Dynamic Rows
- Unable to redirect to reset password link without being logged
- React only re-rendering one setState but not the other
- Date dropdown field selection
- Manipulating JSON in React
- index.tsx in package react-router has 152 problems
- How to declare array from API in place of hardcoded array?
- Generate unique notification from a value in object
- Prevent fixed sidebar menu to scroll over footer
- React: How can I use {props.children} in two layouts of the App structure
- Finding an object in array and taking values from that to present in a select list
- React is not re-rendering to reflect the setState
- why useEffect might be called if subscribed array hadn't changed yet?
- Programmatically close ant design rangepicker in react
- How to window.addEventListener in React JS
- Validation Table Items on add
- If I create custom Button with material-ui ButtonGroup doesnt work
- Creating private route when isAuth comes from a callback
- Stack toast notification from bottom up - css / reactjs
- Hide all div and show one div on clicking multiple button
- How to create a modified useSelector custom hook with TypeScript
- What is the version 9 equivalent of this in firebase?