Changing props of child component with onchange in React

Question

I am trying to change the props of Chart component with select. But the url value does not change to data_stat2.json in Chart , even if I can see the change in the url variable via the console .

Should the change in select trigger a new render to actually change this.props.url in Chart?

var App = React.createClass({
render: function() {
var url ="data_stat1.json"
function logChange(val) {
 url = 'data_' + val + '.json';
   console.log(url)};
return (
  <Grid style={{padding: 10}}>
    <Row>
      <Col md={8}>
        <Select
          name="stats"
          value="stat1"
          options={[
              { value: "stat1", label: "Stat1" },
              { value: "stat2", label: "Stat2" }
          ]}
          multi = {false}
          clearable = {false}
          searchable={false}
          onChange = {logChange}
        />
      </Col>
    </Row>
    <Row>
      <Chart
        url = {url}
      />
    </Row>
  </Grid>
);
}
});

Answer 1

Use State and setState to handle passing changing data to components:

var App = React.createClass({
 getInitialState: function() {
   return {
     url: "data_stat1.json",
   };
 },
 handleUpdate: function(url) {
    this.setState({
      url: url,
    });
 }, 
 render: function() {

return (
  <Grid style={{padding: 10}}>
    <Row>
      <Col md={8}>
        <Select
          name="stats"
          value="stat1"
          options={[
              { value: "stat1", label: "Stat1" },
              { value: "stat2", label: "Stat2" }
          ]}
          multi = {false}
          clearable = {false}
          searchable={false}
          onChange = {this.handleUpdate}
        />
      </Col>
    </Row>
    <Row>
      <Chart
        url = { this.state.url }
      />
    </Row>
  </Grid>
);
}
});