Изменение реквизита дочернего компонента с заменой в реакторе

Question

Я пытаюсь изменить реквизиты компонента диаграммы с помощью выбора. Но значение url не изменяется до data_stat2.json в Chart, даже если я могу увидеть изменение в переменной url через консоль.

Должно ли изменение в select инициировать новый рендер, чтобы фактически изменить this.props.url в диаграмме?

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

Использование государства и setState для обработки прохождения изменения данных компонентов:

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> 
); 
} 
});