spondbob spondbob - 4 months ago 13
React JSX Question

Change props value

So I basically have this

Home
component that has a
SearchForm
component and a
PostBox
component that display the today's data from API.

var Home = React.createClass({
handleSubmitSearch: function (e) {
e.preventDefault();
// change the URL
},
render: function () {
return (
<div className="home">
<SearchForm
onSubmitSearch={this.handleSubmitSearch} />
<PostBox
url="http://localhost:3000/posts/today"
pollInterval={2000} />
</div>
)
}
});


The thing is, when the submit button in
SearchForm
is triggered, I want to basically show the result into
PostBox
by sending a request to another API like
http://localhost:3000/posts/search/query
instead of showing today's data.
My question is, how can I change the url props on
PostBox
changed by
handleSubmitSearch()
?

Answer

In this case I would put the url to the state and change it while submitting the form.

var Home = React.createClass({
  getInitialState: function() {
    return {url: 'http://localhost:3000/posts/today'};
  },
  handleSubmitSearch: function (e) {
    e.preventDefault();
    var value = ''; // TODO: get value that you want
    this.setState({
      url: 'http://localhost:3000/posts/' + value,
    });
  },
  render: function () {
    return (
      <div className="home">
        <SearchForm
          onSubmitSearch={this.handleSubmitSearch} />
        <PostBox
          url={this.state.url}
          pollInterval={2000} />
      </div>
    )
  }
});