Coder_Nick Coder_Nick - 16 days ago 4
React JSX Question

React component not firing onClick event

I'm working through Tyler Mcginnis' React weather app tutorial and I'm stuck on step 9. I've set up an onClick event that is supposed to push a state and pathname on a route and redirect to the route.

When I click on the element, nothing happens. I try to console log the event but it isn't even firing.

I've set up my ForecastContainer like this:

var React = require('react');
var Forecast = require('../components/Forecast');
var weatherHelpers = require('../utils/weather');

var ForecastContainer = React.createClass({
contextTypes: {
router: React.PropTypes.object.isRequired
},

getInitialState: function(){
return {
isLoading: true,
forecastData: {}
}
},

...

handleClick: function(weather){
this.context.router.push({
pathname: '/detail/' + this.props.routeParams.city,
state: {
weather: weather
}
})
console.log(weather)
},

componentWillUnmount: function () {
window.clearInterval(this.interval)
},

render: function() {
return (
<Forecast
city={this.props.routeParams.city}
isLoading={this.state.isLoading}
forecastData={this.state.forecastData}
onClick={this.handleClick}
/>
)
}
});

module.exports = ForecastContainer;


And I had written my own Forecast component before but had the same error. So I took Tyler's code and I'm still receiving the same no onClick action

His code is below:

function DayItem (props) {
console.log('Day item', )
var date = getDate(props.day.dt);
var icon = props.day.weather[0].icon;
return (
<div style={styles.dayContainer}>
<img style={styles.weather} src={'./app/images/weather-icons/' + icon + '.svg'} alt='Weather' />
<h2 style={styles.subheader}>{date}</h2>
<h1>{props.text}</h1>
</div>
)
}

function ForecastUI (props) {

return (
<div style={{textAlign: 'center'}}>
<h1 style={styles.header}>{props.city}</h1>
<p style={styles.subheader}>Select a day</p>
<div style={styles.container}>
{props.forecast.list.map(function (listItem) {
return <DayItem key={listItem.dt} day={listItem} onClick= {props.onClick.bind(null, listItem)} />
})}
</div>
</div>
)
}

function Forecast (props) {
console.log('Forecast', props)
return (
<div>
{
props.isLoading === true
? <h1 style={styles.header}> Loading </h1>
: <ForecastUI city={props.city} forecast={props.forecastData} onClick={props.onClick}/>
}
</div>
)
}


I'm rendering the DayItem within ForecastUI and the props are passed in. But when I click on the element, nothing happens.

I've included the line in the routes file:

<Route path='detail/:city' component={DetailContainer} />


I'm not sure where the error is.

Answer

Nothing in DayItem seems to be clickable. Which element do you want to attach onClick to? Maybe the image, or the h1. Add it to the DayItem.

function DayItem (props) {
  console.log('Day item', )
  var date = getDate(props.day.dt);
  var icon = props.day.weather[0].icon;
  return (
    <div style={styles.dayContainer}>
      <img style={styles.weather} src={'./app/images/weather-icons/' + icon + '.svg'} alt='Weather' />
      <h2 style={styles.subheader}>{date}</h2>
      <h1>{props.text}</h1>
    </div>
  )
}

Add to the img:

      <img style={styles.weather} src={'./app/images/weather-icons/' + icon + '.svg'} alt='Weather' onClick={props.onClick} />
Comments