score:0
score:0
i figured out the problem, my post was not working for whatever reason so i combined the search term parameter from the input field into the get request and now my express proxy server communicates correctly to the openweatherapi, retrieves the results, then sends the results back to the client. i used route parameters, which you can read more about here.
reformated react code
const weathercontainer = () => {
let [searchterm, setsearchterm] = usestate('')
let [currentweather, setcurrentweather] = usestate({});
let [forecastedweather, setforecastedweather] = usestate({});
let [loading, setloading] = usestate(false);
const handleinput = (e) => {
setsearchterm(e.target.value);
}
const handlesearch = () => {
fetch(`/weather/${searchterm}`)
.then(res => res.json())
.then(data => {
console.log(data)
})
};
return (
<>
<div classname='search-bar'>
<input classname='text_input' type='text' name='searchterm' onchange={handleinput} placeholder='enter city' />
<button classname='search-button' onclick={handlesearch} type='submit' value='submit' name='button'>
<icon icon={searchicon} flip="horizontal" />
</button>
</div>
<div classname='weather_container'>
<currentweathercomponent />
<forecastcontainer />
</div>
</>
)
};
reformated express code
const express = require('express');
const port = 5000;
const fetch = require('node-fetch')
const app = express();
const weatherapikey = '***hidden***';
const cors = require('cors');
app.use(express.static("client"));
app.use(cors());
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
// get current & forecast weather by search term
app.get('/weather/:searchterm', (req, res) => {
console.log(req.params)
const searchterm = req.params.searchterm;
console.log(searchterm)
let currenturl = `http://api.openweathermap.org/data/2.5/weather?q=${searchterm}&units=imperial&appid=${weatherapikey}`;
fetch(currenturl)
.then(res => res.json())
.then(data => {
res.send(data)
})
.catch(err => {
res.redirect('/error')
});
});
app.listen(port);
console.log(`server is listening on ${port}`);
Source: stackoverflow.com
Related Query
- React Form Not Fetching From Express Server
- Zip File Download via Axios from Express Server not working in React App
- Server not returning JSON from Express to React (proxy)
- Can not upload image to server fetching PHP from react
- HTTP requests from React not reaching Express backend on production server
- React form POST to Express server not working - REST
- Serve React App from Express Server Err - not a supported stylesheet MIME type
- ReactJS not fetching data from server when using 'url' attribute
- How can I pass data from express server to react views?
- How to send form data from React to express
- Server Sent Events not receiving messages from stream with React and NodeJs
- REACT - Set initial data in Formik Form after fetching from API
- Express Static files on server not loading correctly but React Front end is loading correctly?
- React Native + Expo + Axios file upload not working because axios is not sending the form data to the server
- How to Fetch and Display an Image from an express backend server to a React js frontend?
- Express does not receive parameters via POST from React using Fetch API
- React not fetching data from the updated env file
- Form is not submitting from an outer button using react
- POST to Express the data from React form
- Pass variable from express server to react application
- Express CORs policy preventing Apollo client from fetching from server
- express is not fetching react build folder
- File upload from form not woking in React
- How to load favicon in django server from react build folder? manifest.json not found error
- Fetching from localhost server in Create React App during development vs fetching from deployment during production
- React pending promise while after fetching from express backend
- Can I serve a create react app from an express server without running 'npm run build'?
- How to make API request from react client to express server running on the Heroku platform
- Favicon not displaying in most browsers and shows odd src path. React + Express Server
- React hook form does not work with input from reactstrap
More Query from same tag
- how to use redux useSelector to check state and do a fetch to a database
- uncaught error in js promise in react/redux app
- Cannot change the width of the react-select element
- How to display the separate graph using multiple axios request with React?
- ReactJS: Child Component is not updating even I am passing different values
- React-Vega - WARN Infinite extent for field "x": [Infinity, -Infinity]
- react, gatsby - how to access GraphQL query data in react class component
- node.JS Express passport stuck in infinte loop on auth check
- How to setState in DE-structured objects using react hooks
- React-Redux Actions may not have an undefined "type" property
- How to manipulate recursively nested elements in react
- Conditional Rendering Table Rows React
- How to send the resized image from sharp back to user?
- Unhandled Rejection (Error): The file given is not an image
- `display: none` vs conditional render in React
- How can I apply a state with only 1extra nested state to MongoDB
- Typescript React types not recognised when compiling
- How to use the useState hook with asynchronous calls to change an array?
- convert mapStateToProps to hooks
- Removing duplicates from two arrays in javascript based on a single attribute
- Setting same value using set function in Record is creating a new object
- Better way to use material-system with styled-components
- Intital route name parameter for React navigation app drawer (React Native)
- Filter images in React with JavaScript
- No items iterated in array jsx
- Form Using React Hook Forms showing undefined for Custom Input Component Fields
- How to build react native project to aar library?
- Add weekly dates between years
- How to check/uncheck a list of checkboxes in react
- Confusion over javascript .map() is able to modify the original array instead of assigning a transformation of the array