CODEWITHSUNDEEP
javascripthtmlcssreactjs
Chandler
Chandler

Reputation: 63

Updating a class' props from a parent in React

As an intro to React, I am rebuilding the Google Weather app. My goal is that when one of the days are selected, the main section (bordered in red) will update. I thought that I would be able to update the props inside of handleSelectionAt() inside of App.js. Any help is appreciated!

Here's App.js

class App extends Component {
state = {
    city: 'Huntsville',
    state: 'AL',
    zip: '35801',
    currentDay: 'Saturday',
    currentHour: '12:00 PM',

    weathers: [//..weather info..//]
};

handleSelectionAt = indexToChange =>
    this.setState({
        weathers: this.state.weathers.map((weather, index) => {
            if (index === indexToChange) {

                // set location to update
                // Location.setProps(weather);

                return {
                    ...weather,
                    selected: true
                };
            } else {
                return {
                    ...weather,
                    selected: false
                }
            }
            return weather;
        })
    });

render() {
    return (
        <div className="App">
            <h1 align="center">React to the Weather</h1>

            <div className="Container">
                <Location
                    city={this.state.city}
                    state={this.state.state}
                    zip={this.state.zip}
                    weather={this.state.weathers[0]} />

                <WeatherList
                    weathers={this.state.weathers}
                    handleSelectionAt={this.handleSelectionAt} />
            </div>
        </div>
    );}}

Here's my Location class

const Location = props =>
<div className="Location">
    <h1>{props.city}, {props.state} {props.zip}</h1>
    <h2>{props.weather.day + 'day'} {props.currentHour}</h2>
    <h2>{props.weather.condition}</h2>
    <h3>
        <img
            id="currentCondition"
            align="center"
            src={require(`./img/${props.weather.condition.toLowerCase()}.png`)} alt='wtf'/>
        {Math.round((props.weather.high + props.weather.low)/2)}°</h3>
</div>

Location.propTypes = {
    city: PropTypes.string.isRequired,
    state: PropTypes.string.isRequired,
    zip: PropTypes.string.isRequired,
    currentHour: PropTypes.string.isRequired,   // Should update on each selection
    weather: PropTypes.object.isRequired,       // Should update on each selection
};

Upvotes: 0

Views: 21

Answers (1)

ztadic91
ztadic91

Reputation: 2804

You are always passing the first weather object in your Location component.

weather={this.state.weathers[0]}

Find the selected weather in your render method and pass it down.

render() {
...
let selectedWeather= this.state.weathers.find(x=>x.selected);
<Location
...
    weather={selectedWeather}
/>

Upvotes: 1

Related Questions