Styjun

I'm making a React app using openweathermap API. Right now I receive the list of weather data. I'm trying to highlight the weather if I click it.

To make this happen, I wrote on App.js to pass a prop to WeatherDetail.js, but so far seems like WeatherDetail.js doesn't recognize props from its parent.

class App extends React.Component 
 constructor(props) 
 super(props);
 
 state = forecasts: [], selectedWeather: null 

 getWeather = async city => 
 const response = await weather.get('/forecast', 
 params: 
 q: city
 
 );
 this.setState (
 forecasts: response.data.list,
 city: response.data.city.name,
 selectedWeather: response.data.list[0]
 ) 
 
 

 onWeatherSelectFunction = (item) => 
 this.setState( selectedWeather: item );
 ;

 render() 
 return (
 <div>
 <Form loadWeather=this.getWeather />
 <WeatherDetail itemToChild=this.state.selectedWeather />
 <WeatherList 
 onWeatherSelect=this.onWeatherSelectFunction
 weathers=this.state.forecasts
 city=this.state.city
 />
 </div>
 ); 
 
}

export default App;

const WeatherDetail = (forecasts, itemToChild, props) => 
 const weather = props.itemToChild;
 if(!weather) 
 return <div>Loading...</div>;
 
 return <div>weather.humidity</div> <-- This doesn't appear on screen
 );

const WeatherItem = (item, onWeatherSelectFromList, humidity, city, temp ) => 

 return (
 <div> 
 <div onClick=() => onWeatherSelectFromList(item) >
 city<br /> <-- Appears on screen
 humidity<br /> <-- Appears on screen
 </div>
 </div>
 );
;

const WeatherList = (weathers, onWeatherSelect, city) => 
 const renderedList = weathers.map((item) => 
 return (
 <div>
 <WeatherItem
 city=city
 temp=item.main.temp
 humidity=item.main.humidity
 temperature=item.weather.icon
 onWeatherSelectFromList=onWeatherSelect
 />
 </div>
 );
 ); 
 return (
 <div className="flex">
 renderedList
 </div>
 );

class Form extends React.Component 
 state = term: '' ;

 onFormSubmit = (event) => 
 event.preventDefault();

 this.props.loadWeather(this.state.term);
 

 render() 
 return (
 <div>
 <form onSubmit=this.onFormSubmit>
 <input 
 ref="textInput"
 type="text" 
 value=this.state.term 
 onChange=event => this.setState(term: event.target.value)
 />
 <button>Get Weather</button>
 </form>
 </div>
 );
 

How do I connect App.js and WeatherDetail.js using props?

In your App.js file you are passing only one props called itemToChild

<WeatherDetail itemToChild=this.state.selectedWeather />

In your WeatherDetail file from where you're getting forecasts? do you get forecasts from redux store?

const WeatherDetail = (forecasts, itemToChild, props) => 
 const weather = props.itemToChild;
 if(!weather) 
 return <div>Loading...</div>;
 
 return <div>weather.humidity</div> <-- This doesn't appear on screen
 );

change your code with this.

const WeatherDetail = (props) => 
 console.log("props.itemToChild", props.itemToChild) // check this console that do you get data as you want.
 const weather = props.itemToChild;
 if(!weather) 
 return <div>Loading...</div>;
 
 return <div>weather.humidity</div> <-- This doesn't appear on screen
 );

You have already destructured the props so there is no need to mention props in WeatherDetail component
and also there is an extra parenthesis after the return statement you should remove that also...

Old:

const WeatherDetail = (forecasts, itemToChild, props) => 
 const weather = props.itemToChild;
 if(!weather) 
 return <div>Loading...</div>;
 
 return <div>weather.humidity</div> <-- This doesn't appear on screen
 );

New:

const WeatherDetail = ( forecasts, itemToChild ) => 
 const weather = itemToChild;
 if (!weather) 
 return <div>Loading...</div>;
 
 return <div>weather.humidity</div>;
;