Ad

Display Filtered Objects/arrays Created By Child Component Into The Parent Component

- 1 answer

I am new to ReactJS but learned tons of things lately. I created a SearchBar React component so I can filter my array. Once I start entering a value in the input text box, the filteredObjects becomes smaller when the string is a match. That's good and it's working.

However, what I can't figure out is how can my parent component rerender the new value that I filtered? I want the values of filteredObjects to be rendered on the screen.

This is my parent component

var CommentBox = React.createClass({
  displayName: 'CommentBox',

  getInitialState: function() {
    return { 
      responseText: []
    }
  },

  componentDidMount: function() {
    var self = this;
    fetch.get(url).then(function (response) {
      self.setState({responseText: response.data.logs});
    }).catch(function (error) {
      console.log(error);
    });
  },

render: function() {
  let msg = this.state.responseText.map((m, i) => <tr key={i}><td>{m.timestamp}</td>);

  return (
    <div>
    <SearchBar logs={this.state.responseText} />
    <table>
      <tbody>
      <tr>
        <th>Timestamp</th>
      </tr>
      {msg}
      </tbody>
    </table>
    </div>
  );
}
});

The SearchBar component code is below

var SearchBar = React.createClass({
  getInitialState: function() {
    return { findQuery: ''};
  },

  onUpdate: function(event) {
    this.setState({findQuery: event.target.value});

    var filteredObjects = this.props.logs.filter(function(obj) {
      var matched = false;
      Object.keys(obj).some(function(key) {
        if (obj[key].indexOf(event.target.value) > -1) {
          matched = true;
          return true;
        }
      });
      return matched;
    });
  },

  render: function() {
    var value = this.state.findQuery;
    return <input type="text" placeholder="Search..." value={value} onChange={this.onUpdate} />;
  }
});
Ad

Answer

Here's a solution that adds the matched objects into the parents state, and passes a method to update it as a prop to the child. From here, you should be able to use this.state.filteredResponses to update the msg and display the data.

Parent

var CommentBox = React.createClass({

  displayName: 'CommentBox',

  getInitialState: function() {
    return { 
      allResponses: [],
      filteredResponses: []
    }
  },

  updateFiltered: function(query) {
    var filteredObjects = this.state.filteredResponses.filter(function(obj) {
      var matched = false;
      Object.keys(obj).some(function(key) {
        if (obj[key].indexOf(event.target.value) > -1) {
          matched = true;
          return true;
        }
      });
      return matched;
    });

    this.setState({filteredResponses: filteredObjects));
  },

  componentDidMount: function() {
    var self = this;
    fetch.get(url).then(function (response) {
      self.setState({allResponses: response.data.logs});
    }).catch(function (error) {
      console.log(error);
    });
  },

render: function() {
  const responses = this.state.filteredResponses.length ? this.state.filteredResponses : this.state.allResponses;
  const msg = responses.map((m, i) => <tr key={i}><td>{m.timestamp}</td>);

  return (
    <div>
    <SearchBar updateFiltered={this.updateFiltered} />
    <table>
      <tbody>
      <tr>
        <th>Timestamp</th>
      </tr>
      {msg}
      </tbody>
    </table>
    </div>
  );
}
});

Child

var SearchBar = React.createClass({
  getInitialState: function() {
    return { findQuery: ''};
  },

  onUpdate: function(event) {
    this.setState({findQuery: event.target.value});
    this.props.updateFiltered(event.target.value);
  },

  render: function() {
    var value = this.state.findQuery;
    return <input type="text" placeholder="Search..." value={value} onChange={this.onUpdate} />;
  }
});
Ad
source: stackoverflow.com
Ad