In my current project, the user is able to input a city and the background of the page changes to display an image of that specific city. This image is obtained through an API call to Pixabay API, with the result stored in a variable named "background". However, I'm facing an issue in appending this background image to the entire page. When I console.log(background), I get the URL of the desired background image that I want to apply to the page.
import React, { Component } from "react";
import Title from "./Title.js";
import Form from "./Form.js";
import Weather from "./Weather.js";
import axios from "axios";
// import logo from "./logo.svg";
import "./App.css";
const API_KEY = "b6907d289e10d714a6e88b30761fae22";
// const API_ID = "12653279-f2ae53f8bfb342d39b6cbf92b";
class App extends Component {
state = {
temperature: undefined,
city: undefined,
description: undefined,
error: undefined,
searchText: "",
apiUrl: "https://pixabay.com/api",
apiKey: "12653279-f2ae53f8bfb342d39b6cbf92b",
images: []
};
// Code for fetching weather data
render() {
return (
<div className="container">
<Title />
<Form getweatherData={this.getweatherData} />
<Weather
temperature={this.state.temperature}
city={this.state.city}
country={this.state.country}
description={this.state.description}
error={this.state.error}
/>
</div>
);
}
}
export default App;
Form.js
import React, { Component } from "react";
class Form extends Component {
render() {
return (
<form onSubmit={this.props.getweatherData}>
<input type="text" name="city" placeholder="City..." />
<button>Get Weather</button>
</form>
);
}
}
export default Form;